React experimental_useContextSelector: 선택적 Context 소비 심층 분석

React Context API는 모든 수준에서 수동으로 props를 전달할 필요 없이 컴포넌트 트리 전체에서 데이터를 공유하는 방법을 제공합니다. 강력하지만, Context를 직접 사용하면 때때로 성능 문제로 이어질 수 있습니다. Context를 사용하는 모든 컴포넌트는 Context 값의 작은 부분에만 의존하더라도 Context 값이 변경될 때마다 다시 렌더링됩니다. 이때 experimental_useContextSelector가 등장합니다. 현재 React의 실험 채널에 있는 이 훅은 컴포넌트가 Context 값의 특정 부분만 선택적으로 구독할 수 있도록 하여 불필요한 재렌더링을 줄여 성능을 크게 향상시킵니다.

experimental_useContextSelector란 무엇인가요?

experimental_useContextSelector는 Context 값의 특정 부분을 선택할 수 있는 React 훅입니다. Context의 어떤 부분이 변경될 때마다 컴포넌트를 재렌더링하는 대신, Context 값의 선택된 부분이 변경될 때만 컴포넌트가 재렌더링됩니다. 이는 훅에 셀렉터 함수를 제공하여 Context에서 원하는 값을 추출함으로써 달성됩니다.

experimental_useContextSelector 사용의 주요 이점:

• 향상된 성능: 선택된 값이 변경될 때만 재렌더링하여 불필요한 재렌더링을 최소화합니다.
• 세분화된 제어: 어떤 Context 값이 재렌더링을 트리거할지에 대한 정확한 제어를 제공합니다.
• 최적화된 컴포넌트 업데이트: React 애플리케이션의 전반적인 효율성을 향상시킵니다.

어떻게 작동하나요?

experimental_useContextSelector 훅은 두 가지 인수를 취합니다:

1. React.createContext()를 사용하여 생성된 Context 객체입니다.
2. 셀렉터 함수입니다. 이 함수는 전체 Context 값을 인수로 받아서 컴포넌트에 필요한 특정 값을 반환합니다.

이 훅은 컴포넌트를 Context 값의 변경 사항에 구독하지만, 셀렉터 함수가 반환하는 값이 변경된 경우에만 컴포넌트를 재렌더링합니다. 선택된 값이 변경되었는지 여부를 결정하기 위해 효율적인 비교 알고리즘(기본적으로 Object.is, 또는 제공된 경우 사용자 정의 비교자)을 사용합니다.

예시: 전역 테마 Context

기본 색상, 보조 색상, 글꼴 크기, 글꼴 모음과 같은 애플리케이션 테마의 다양한 측면을 관리하는 전역 테마 컨텍스트가 있다고 가정해 봅시다.

1. 테마 Context 생성

먼저, React.createContext()를 사용하여 테마 Context를 생성합니다:

            import React from 'react';

interface Theme {
  primaryColor: string;
  secondaryColor: string;
  fontSize: string;
  fontFamily: string;
  toggleTheme: () => void; // Example action
}

const ThemeContext = React.createContext<Theme | undefined>(undefined);

export default ThemeContext;

            

              
                Copy
              
            
          

2. 테마 Context 제공

다음으로, ThemeProvider 컴포넌트를 사용하여 테마 Context를 제공합니다:

            import React, { useState, useCallback } from 'react';
import ThemeContext from './ThemeContext';

interface ThemeProviderProps {
  children: React.ReactNode;
}

const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const [theme, setTheme] = useState({
    primaryColor: '#007bff', // Default primary color
    secondaryColor: '#6c757d', // Default secondary color
    fontSize: '16px',
    fontFamily: 'Arial',
  });

  const toggleTheme = useCallback(() => {
      setTheme(prevTheme => ({
          ...prevTheme,
          primaryColor: prevTheme.primaryColor === '#007bff' ? '#28a745' : '#007bff' // Toggle between two primary colors
      }));
  }, []);

  const themeValue = {
    ...theme,
    toggleTheme: toggleTheme,
  };

  return (
    <ThemeContext.Provider value={themeValue}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

            

              
                Copy
              
            
          

3. experimental_useContextSelector로 테마 Context 소비

이제 테마 Context에서 primaryColor만 사용해야 하는 컴포넌트가 있다고 가정해 봅시다. 표준 useContext 훅을 사용하면 theme 객체의 어떤 속성이든 변경될 때마다(예: fontSize, fontFamily) 이 컴포넌트가 재렌더링됩니다. experimental_useContextSelector를 사용하면 이러한 불필요한 재렌더링을 피할 수 있습니다.

            import React from 'react';
import ThemeContext from './ThemeContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const MyComponent = () => {
  const primaryColor = useContextSelector(ThemeContext, (theme) => theme?.primaryColor);

  return (
    <div style={{ color: primaryColor }}>
      This text uses the primary color from the theme.
    </div>
  );
};

export default MyComponent;

            

              
                Copy
              
            
          

이 예시에서 MyComponent는 ThemeContext의 primaryColor 값이 변경될 때만 재렌더링됩니다. fontSize 또는 fontFamily의 변경은 재렌더링을 트리거하지 않습니다.

4. experimental_useContextSelector로 테마 Context 액션 소비

테마를 전환하는 버튼을 추가해 보겠습니다. 이것은 컨텍스트에서 함수를 선택하는 것을 보여줍니다.

            import React from 'react';
import ThemeContext from './ThemeContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const ThemeToggler = () => {
  const toggleTheme = useContextSelector(ThemeContext, (theme) => theme?.toggleTheme);

  if (!toggleTheme) {
    return <p>Error: No theme toggle function available.</p>;
  }

  return (
    <button onClick={toggleTheme}>
      Toggle Theme
    </button>
  );
};

export default ThemeToggler;

            

              
                Copy
              
            
          

이 컴포넌트에서는 컨텍스트에서 toggleTheme 함수만 선택합니다. 색상이나 글꼴의 변경은 이 컴포넌트가 재렌더링되도록 하지 않습니다. 이는 자주 업데이트되는 컨텍스트 값을 처리할 때 상당한 성능 최적화입니다.

experimental_useContextSelector 사용 시점

experimental_useContextSelector는 다음 시나리오에서 특히 유용합니다:

• 큰 Context 객체: Context에 많은 속성이 있고 컴포넌트가 해당 속성의 일부만 액세스해야 할 때.
• 자주 업데이트되는 Context: Context 값이 자주 변경되지만 컴포넌트가 특정 변경 사항에만 반응해야 할 때.
• 성능에 중요한 컴포넌트: Context를 사용하는 특정 컴포넌트의 렌더링 성능을 최적화해야 할 때.

experimental_useContextSelector 사용 여부를 결정할 때 다음 사항을 고려하세요:

• 복잡성: experimental_useContextSelector를 사용하면 코드에 약간의 복잡성이 추가됩니다. 성능 이점이 추가된 복잡성보다 큰지 고려하세요.
• 대안: experimental_useContextSelector를 사용하기 전에 메모이제이션(React.memo, useMemo, useCallback)과 같은 다른 최적화 기술을 탐색하세요. 때로는 간단한 메모이제이션만으로도 충분합니다.
• 프로파일링: React DevTools를 사용하여 애플리케이션을 프로파일링하고 불필요하게 재렌더링되는 컴포넌트를 식별하세요. 이는 experimental_useContextSelector가 올바른 솔루션인지 판단하는 데 도움이 될 것입니다.

experimental_useContextSelector 사용을 위한 모범 사례

experimental_useContextSelector를 효과적으로 사용하려면 다음 모범 사례를 따르세요:

• 셀렉터를 순수하게 유지: 셀렉터 함수가 순수 함수인지 확인하세요. Context 값에만 의존해야 하며 부작용이 없어야 합니다.
• 셀렉터 메모이제이션(필요한 경우): 셀렉터 함수가 계산 비용이 많이 든다면 useCallback을 사용하여 메모이제이션하는 것을 고려하세요. 이는 선택된 값의 불필요한 재계산을 방지할 수 있습니다.
• 깊게 중첩된 셀렉터 피하기: 셀렉터 함수를 간단하게 유지하고 깊게 중첩된 객체 액세스를 피하세요. 복잡한 셀렉터는 유지 관리가 어렵고 성능 병목 현상을 유발할 수 있습니다.
• 철저한 테스트: 선택된 Context 값이 변경될 때 컴포넌트가 올바르게 재렌더링되는지 확인하기 위해 컴포넌트를 테스트하세요.

사용자 정의 비교자 (고급 사용법)

기본적으로 experimental_useContextSelector는 Object.is를 사용하여 선택된 값을 이전 값과 비교합니다. 어떤 경우에는 사용자 정의 비교자 함수를 사용해야 할 수도 있습니다. 이는 얕은 비교만으로는 충분하지 않은 복잡한 객체를 다룰 때 특히 유용합니다.

사용자 정의 비교자를 사용하려면 experimental_useContextSelector 주위에 래퍼 훅을 만들어야 합니다:

            import { experimental_useContextSelector as useContextSelector } from 'react';
import { useRef } from 'react';

function useCustomContextSelector<T, S>(
  context: React.Context<T>,
  selector: (value: T) => S,
  equalityFn: (a: S, b: S) => boolean
): S {
  const value = useContextSelector(context, selector);
  const ref = useRef(value);

  if (!equalityFn(ref.current, value)) {
    ref.current = value;
  }

  return ref.current;
}

export default useCustomContextSelector;

            

              
                Copy
              
            
          

이제 experimental_useContextSelector 대신 useCustomContextSelector를 사용하고 사용자 정의 동일성 함수를 전달할 수 있습니다.

예시:

            import React from 'react';
import ThemeContext from './ThemeContext';
import useCustomContextSelector from './useCustomContextSelector';

const MyComponent = () => {
  const theme = useCustomContextSelector(
    ThemeContext,
    (theme) => theme,
    (prevTheme, currentTheme) => {
      // Custom equality check: only re-render if primaryColor or fontSize changes
      return prevTheme?.primaryColor === currentTheme?.primaryColor && prevTheme?.fontSize === currentTheme?.fontSize;
    }
  );

  return (
    <div style={{ color: theme?.primaryColor, fontSize: theme?.fontSize }}>
      This text uses the primary color and font size from the theme.
    </div>
  );
};

export default MyComponent;

            

              
                Copy
              
            
          

고려 사항 및 제한 사항

• 실험적 상태: experimental_useContextSelector는 현재 실험적 API입니다. 이는 React의 향후 버전에서 변경되거나 제거될 수 있음을 의미합니다. 신중하게 사용하고 필요한 경우 코드를 업데이트할 준비를 하세요. 항상 최신 정보를 위해 공식 React 문서를 확인하세요.
• 피어 종속성: 특정 버전의 React 실험 버전을 설치해야 합니다.
• 복잡성 오버헤드: 성능을 최적화하지만 추가적인 코드 복잡성을 유발하며 더 신중한 테스트 및 유지 관리가 필요할 수 있습니다.
• 대안: experimental_useContextSelector를 선택하기 전에 대안적인 최적화 전략(예: 메모이제이션, 컴포넌트 분할)을 고려하세요.

글로벌 관점 및 사용 사례

experimental_useContextSelector의 이점은 지리적 위치나 산업에 관계없이 보편적입니다. 그러나 특정 사용 사례는 다를 수 있습니다. 예를 들어:

• 전자상거래 플랫폼 (글로벌): 국제적으로 제품을 판매하는 전자상거래 플랫폼은 통화, 언어, 지역과 같은 사용자 선호도를 관리하기 위해 컨텍스트를 사용할 수 있습니다. 제품 가격 또는 설명을 표시하는 컴포넌트는 통화나 언어가 변경될 때만 재렌더링되도록 experimental_useContextSelector를 사용하여 전 세계 사용자를 위한 성능을 향상시킬 수 있습니다.
• 금융 대시보드 (다국적 기업): 다국적 기업이 사용하는 금융 대시보드는 주가, 환율, 경제 지표와 같은 글로벌 시장 데이터를 관리하기 위해 컨텍스트를 사용할 수 있습니다. 특정 금융 지표를 표시하는 컴포넌트는 관련 시장 데이터가 변경될 때만 재렌더링되도록 experimental_useContextSelector를 사용하여 불필요한 성능 오버헤드 없이 실시간 업데이트를 보장할 수 있습니다. 이는 인터넷 연결이 느리거나 불안정한 지역에서 중요합니다.
• 협업 문서 편집기 (분산 팀): 분산된 팀이 사용하는 협업 문서 편집기는 텍스트 내용, 서식, 사용자 선택을 포함하여 문서의 상태를 관리하기 위해 컨텍스트를 사용할 수 있습니다. 문서의 특정 부분을 표시하는 컴포넌트는 관련 내용이 변경될 때만 재렌더링되도록 experimental_useContextSelector를 사용하여 다른 시간대 및 네트워크 조건의 사용자에게 원활하고 반응성 있는 편집 경험을 제공할 수 있습니다.
• 콘텐츠 관리 시스템 (글로벌 대상): 글로벌 대상을 위해 콘텐츠를 관리하는 데 사용되는 CMS는 애플리케이션 설정, 사용자 역할 또는 사이트 구성을 저장하기 위해 컨텍스트를 사용할 수 있습니다. 콘텐츠를 표시하는 컴포넌트는 어떤 컨텍스트 값이 재렌더링을 트리거할지 선택적으로 결정하여, 다양한 지리적 위치와 다양한 네트워크 속도를 가진 사용자에게 서비스를 제공하는 트래픽이 많은 페이지에서 성능 문제를 피할 수 있습니다.

결론

experimental_useContextSelector는 Context API에 크게 의존하는 React 애플리케이션을 최적화하기 위한 강력한 도구입니다. 컴포넌트가 Context 값의 특정 부분만 선택적으로 구독할 수 있도록 함으로써 불필요한 재렌더링을 크게 줄이고 전반적인 성능을 향상시킬 수 있습니다. 그러나 이 API의 추가된 복잡성과 실험적 특성에 비해 이점을 신중하게 고려하는 것이 중요합니다. 애플리케이션을 프로파일링하고, 대안적인 최적화 기술을 고려하며, experimental_useContextSelector가 필요에 맞는 올바른 솔루션인지 확인하기 위해 컴포넌트를 철저히 테스트하는 것을 기억하세요.

React가 계속 발전함에 따라 experimental_useContextSelector와 같은 도구는 개발자들이 글로벌 사용자를 위한 더욱 효율적이고 확장 가능한 애플리케이션을 구축할 수 있도록 지원합니다. 이러한 고급 기술을 이해하고 활용함으로써 더 나은 사용자 경험을 만들고 전 세계 사용자에게 고성능 웹 애플리케이션을 제공할 수 있습니다.