React experimental_useContextSelector: 최적화된 성능을 위한 컨텍스트 선택 마스터하기

React의 Context API는 컴포넌트 트리의 모든 레벨을 통해 수동으로 props를 전달하지 않고도 컴포넌트 간에 데이터를 공유할 수 있는 강력한 메커니즘을 제공합니다. 이는 전역 상태, 테마, 사용자 인증 및 기타 여러 영역에 걸친 관심사를 관리하는 데 매우 유용합니다. 그러나 단순한 구현은 불필요한 컴포넌트 리렌더링을 유발하여 애플리케이션 성능에 영향을 줄 수 있습니다. 바로 이 지점에서 특정 컨텍스트 값에 기반하여 컴포넌트 업데이트를 미세 조정하도록 설계된 훅인 experimental_useContextSelector가 등장합니다.

선택적 컨텍스트 업데이트의 필요성 이해하기

experimental_useContextSelector를 살펴보기 전에, 이것이 해결하려는 핵심 문제를 이해하는 것이 중요합니다. Context provider가 업데이트되면, 해당 컨텍스트의 모든 소비자는 자신이 사용하는 특정 값이 변경되었는지 여부와 관계없이 리렌더링됩니다. 작은 애플리케이션에서는 이것이 눈에 띄지 않을 수 있습니다. 그러나 컨텍스트가 자주 업데이트되는 크고 복잡한 애플리케이션에서는 이러한 불필요한 리렌더링이 심각한 성능 병목 현상이 될 수 있습니다.

간단한 예를 들어보겠습니다. 사용자 프로필 데이터(이름, 아바타, 이메일)와 UI 환경설정(테마, 언어)을 모두 포함하는 전역 사용자 컨텍스트가 있는 애플리케이션이 있습니다. 한 컴포넌트는 사용자의 이름만 표시하면 됩니다. 선택적 업데이트가 없다면, 테마나 언어 설정에 대한 어떠한 변경이라도 이름 표시 컴포넌트의 리렌더링을 유발할 것입니다. 비록 해당 컴포넌트가 테마나 언어의 영향을 받지 않음에도 불구하고 말이죠.

experimental_useContextSelector 소개

experimental_useContextSelector는 컴포넌트가 컨텍스트 값의 특정 부분만 구독할 수 있도록 하는 React 훅입니다. 이는 컨텍스트 객체와 셀렉터 함수를 인수로 받아 이를 달성합니다. 셀렉터 함수는 전체 컨텍스트 값을 받아 컴포넌트가 의존하는 특정 값(또는 값들)을 반환합니다. 그러면 React는 반환된 값에 대해 얕은 비교(shallow comparison)를 수행하고, 선택된 값이 변경된 경우에만 컴포넌트를 리렌더링합니다.

중요 참고사항: experimental_useContextSelector는 현재 실험적 기능이며 향후 React 릴리스에서 변경될 수 있습니다. 동시성 모드(concurrent mode)를 선택하고 실험적 기능 플래그를 활성화해야 합니다.

experimental_useContextSelector 활성화하기

experimental_useContextSelector를 사용하려면 다음이 필요합니다:

1. 동시성 모드를 지원하는 React 버전(React 18 이상)을 사용하고 있는지 확인하세요.
2. 동시성 모드와 실험적 컨텍스트 셀렉터 기능을 활성화하세요. 이는 일반적으로 번들러(예: Webpack, Parcel)를 구성하고 기능 플래그를 설정하는 작업을 포함합니다. 최신 지침은 공식 React 문서를 확인하세요.

experimental_useContextSelector의 기본 사용법

코드 예제를 통해 사용법을 설명하겠습니다. 사용자 정보와 환경설정을 제공하는 UserContext가 있다고 가정해 보겠습니다:

// UserContext.js
import React, { createContext, useState, useContext } from 'react';

const UserContext = createContext({
  user: {
    name: 'John Doe',
    email: 'john.doe@example.com',
    avatar: '/path/to/avatar.jpg',
  },
  preferences: {
    theme: 'light',
    language: 'en',
  },
  updateTheme: () => {},
  updateLanguage: () => {},
});

const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    avatar: '/path/to/avatar.jpg',
  });
  const [preferences, setPreferences] = useState({
    theme: 'light',
    language: 'en',
  });

  const updateTheme = (newTheme) => {
    setPreferences({...preferences, theme: newTheme});
  };

  const updateLanguage = (newLanguage) => {
    setPreferences({...preferences, language: newLanguage});
  };

  return (
    
      {children}
    
  );
};

const useUser = () => useContext(UserContext);

export { UserContext, UserProvider, useUser };

이제 experimental_useContextSelector를 사용하여 사용자의 이름만 표시하는 컴포넌트를 만들어 보겠습니다:

// UserName.js
import React from 'react';
import { UserContext } from './UserContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const UserName = () => {
  const userName = useContextSelector(UserContext, (context) => context.user.name);

  console.log('UserName 컴포넌트가 렌더링되었습니다!');
  return 
Name: {userName}
;
};

export default UserName;

이 예제에서 셀렉터 함수 (context) => context.user.name은 UserContext에서 사용자의 이름만 추출합니다. UserName 컴포넌트는 테마나 언어와 같은 UserContext의 다른 속성이 업데이트되더라도 사용자의 이름이 변경될 경우에만 리렌더링됩니다.

experimental_useContextSelector 사용의 이점

• 성능 향상: 불필요한 컴포넌트 리렌더링을 줄여, 특히 복잡하고 자주 업데이트되는 컨텍스트를 가진 애플리케이션에서 더 나은 성능을 이끌어냅니다.
• 세밀한 제어: 어떤 컨텍스트 값이 컴포넌트 업데이트를 유발할지 세밀하게 제어할 수 있습니다.
• 간소화된 최적화: 수동 메모이제이션(memoization) 기술에 비해 컨텍스트 최적화에 더 간단한 접근 방식을 제공합니다.
• 향상된 유지보수성: 컴포넌트가 의존하는 컨텍스트 값을 명시적으로 선언함으로써 코드 가독성과 유지보수성을 향상시킬 수 있습니다.

experimental_useContextSelector를 사용해야 할 때

experimental_useContextSelector는 다음 시나리오에서 가장 유용합니다:

• 크고 복잡한 애플리케이션: 수많은 컴포넌트와 자주 업데이트되는 컨텍스트를 다룰 때.
• 성능 병목 현상: 프로파일링을 통해 불필요한 컨텍스트 관련 리렌더링이 성능에 영향을 미치고 있음이 밝혀졌을 때.
• 복잡한 컨텍스트 값: 컨텍스트에 많은 속성이 포함되어 있고, 컴포넌트가 그중 일부만 필요로 할 때.

experimental_useContextSelector를 피해야 할 때

experimental_useContextSelector는 매우 효과적일 수 있지만, 만병통치약은 아니며 신중하게 사용해야 합니다. 다음은 이것이 최선의 선택이 아닐 수 있는 상황입니다:

• 간단한 애플리케이션: 컴포넌트가 적고 컨텍스트 업데이트가 드문 소규모 애플리케이션의 경우, experimental_useContextSelector 사용에 따른 오버헤드가 이점보다 클 수 있습니다.
• 많은 컨텍스트 값에 의존하는 컴포넌트: 컴포넌트가 컨텍스트의 상당 부분에 의존하는 경우, 각 값을 개별적으로 선택하는 것이 큰 성능 향상을 제공하지 않을 수 있습니다.
• 선택된 값의 잦은 업데이트: 선택된 컨텍스트 값이 자주 변경되면 컴포넌트는 여전히 자주 리렌더링되어 성능상의 이점이 무효화됩니다.
• 초기 개발 단계: 먼저 핵심 기능에 집중하세요. 성능 프로파일링을 기반으로 필요할 때 나중에 experimental_useContextSelector로 최적화하세요. 섣부른 최적화는 비생산적일 수 있습니다.

고급 사용법 및 고려사항

1. 불변성(Immutability)이 핵심입니다

experimental_useContextSelector는 얕은 동등성 검사(Object.is)에 의존하여 선택된 컨텍스트 값이 변경되었는지 확인합니다. 따라서 컨텍스트 값이 불변(immutable)하도록 보장하는 것이 중요합니다. 컨텍스트 값을 직접 변경하면 기본 데이터가 변경되었더라도 리렌더링이 발생하지 않습니다. 컨텍스트 값을 업데이트할 때는 항상 새로운 객체나 배열을 생성해야 합니다.

예를 들어, 다음과 같이 하는 대신:

context.user.name = 'Jane Doe'; // 잘못됨 - 객체를 직접 변경함

다음을 사용하세요:

setUser({...user, name: 'Jane Doe'}); // 올바름 - 새 객체를 생성함

2. 셀렉터의 메모이제이션

experimental_useContextSelector가 불필요한 컴포넌트 리렌더링을 방지하는 데 도움이 되지만, 셀렉터 함수 자체를 최적화하는 것 또한 중요합니다. 셀렉터 함수가 렌더링될 때마다 비용이 많이 드는 계산을 수행하거나 새 객체를 생성한다면, 선택적 업데이트의 성능 이점을 상쇄할 수 있습니다. useCallback이나 다른 메모이제이션 기술을 사용하여 셀렉터 함수가 필요할 때만 다시 생성되도록 하세요.

import React, { useCallback } from 'react';
import { UserContext } from './UserContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const UserName = () => {
  const selectUserName = useCallback((context) => context.user.name, []);
  const userName = useContextSelector(UserContext, selectUserName);

  return 
Name: {userName}
;
};

export default UserName;

이 예제에서 useCallback은 selectUserName 함수가 컴포넌트가 처음 마운트될 때 한 번만 다시 생성되도록 보장합니다. 이는 불필요한 계산을 방지하고 성능을 향상시킵니다.

3. 서드파티 상태 관리 라이브러리와 함께 사용하기

experimental_useContextSelector는 Redux, Zustand, 또는 Jotai와 같은 서드파티 상태 관리 라이브러리와 함께 사용할 수 있습니다. 단, 이러한 라이브러리가 React Context를 통해 상태를 노출해야 합니다. 구체적인 구현은 라이브러리에 따라 다르지만, 일반적인 원칙은 동일합니다: experimental_useContextSelector를 사용하여 컨텍스트에서 필요한 상태 부분만 선택하는 것입니다.

예를 들어, React Redux의 useContext 훅과 함께 Redux를 사용하는 경우, experimental_useContextSelector를 사용하여 Redux 스토어 상태의 특정 조각(slice)을 선택할 수 있습니다.

4. 성능 프로파일링

experimental_useContextSelector를 구현하기 전과 후에 애플리케이션의 성능을 프로파일링하여 실제로 이점을 제공하는지 확인하는 것이 중요합니다. React의 Profiler 도구나 다른 성능 모니터링 도구를 사용하여 컨텍스트 관련 리렌더링이 병목 현상을 일으키는 영역을 식별하세요. 프로파일링 데이터를 신중하게 분석하여 experimental_useContextSelector가 불필요한 리렌더링을 효과적으로 줄이고 있는지 판단하세요.

국제화 고려사항 및 예제

국제화된 애플리케이션을 다룰 때, 컨텍스트는 종종 언어 설정, 통화 형식, 날짜/시간 형식과 같은 지역화 데이터를 관리하는 데 중요한 역할을 합니다. experimental_useContextSelector는 이러한 시나리오에서 지역화된 데이터를 표시하는 컴포넌트의 성능을 최적화하는 데 특히 유용할 수 있습니다.

예제 1: 언어 선택

다국어를 지원하는 애플리케이션을 생각해 보겠습니다. 현재 언어는 LanguageContext에 저장됩니다. 지역화된 인사말 메시지를 표시하는 컴포넌트는 experimental_useContextSelector를 사용하여 컨텍스트의 다른 값이 업데이트될 때마다 리렌더링하는 대신, 언어가 변경될 때만 리렌더링하도록 할 수 있습니다.

// LanguageContext.js
import React, { createContext, useState, useContext } from 'react';

const LanguageContext = createContext({
  language: 'en',
  translations: {
    en: {
      greeting: 'Hello, world!',
    },
    fr: {
      greeting: 'Bonjour, le monde!',
    },
    es: {
      greeting: '¡Hola, mundo!',
    },
  },
  setLanguage: () => {},
});

const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  const changeLanguage = (newLanguage) => {
    setLanguage(newLanguage);
  };

  const translations = LanguageContext.translations;

  return (
    
      {children}
    
  );
};

const useLanguage = () => useContext(LanguageContext);

export { LanguageContext, LanguageProvider, useLanguage };

// Greeting.js
import React from 'react';
import { LanguageContext } from './LanguageContext';
import { experimental_useContextSelector as useContextSelector } from 'react';

const Greeting = () => {
  const languageContext = useContextSelector(LanguageContext, (context) => {
    return {
        language: context.language,
        translations: context.translations
    }
  });

  const greeting = languageContext.translations[languageContext.language].greeting;
  return 
{greeting}
;
};

export default Greeting;

예제 2: 통화 형식 지정

전자상거래 애플리케이션은 사용자가 선호하는 통화를 CurrencyContext에 저장할 수 있습니다. 제품 가격을 표시하는 컴포넌트는 experimental_useContextSelector를 사용하여 통화가 변경될 때만 리렌더링되도록 하여 가격이 항상 올바른 형식으로 표시되도록 보장할 수 있습니다.

예제 3: 시간대 처리

다른 시간대의 사용자에게 이벤트 시간을 표시하는 애플리케이션은 TimeZoneContext를 사용하여 사용자가 선호하는 시간대를 저장할 수 있습니다. 이벤트 시간을 표시하는 컴포넌트는 experimental_useContextSelector를 사용하여 시간대가 변경될 때만 리렌더링되도록 하여 시간이 항상 사용자의 현지 시간으로 표시되도록 보장할 수 있습니다.

experimental_useContextSelector의 한계

• 실험적 상태: 실험적 기능이므로 API나 동작이 향후 React 릴리스에서 변경될 수 있습니다.
• 얕은 동등성(Shallow Equality): 얕은 동등성 검사에 의존하므로 복잡한 객체나 배열에는 충분하지 않을 수 있습니다. 경우에 따라 깊은 비교가 필요할 수 있지만, 성능에 미치는 영향 때문에 드물게 사용해야 합니다.
• 과잉 최적화 가능성: experimental_useContextSelector를 과도하게 사용하면 코드에 불필요한 복잡성이 추가될 수 있습니다. 성능 향상이 추가된 복잡성을 정당화하는지 신중하게 고려하는 것이 중요합니다.
• 디버깅 복잡성: 선택적 컨텍스트 업데이트와 관련된 문제를 디버깅하는 것은 특히 복잡한 컨텍스트 값과 셀렉터 함수를 다룰 때 어려울 수 있습니다.

experimental_useContextSelector의 대안

experimental_useContextSelector가 사용 사례에 적합하지 않은 경우, 다음 대안을 고려해 보세요:

• useMemo: 컨텍스트를 소비하는 컴포넌트를 메모이즈합니다. 이는 컴포넌트에 전달된 props가 변경되지 않았다면 리렌더링을 방지합니다. 이는 experimental_useContextSelector보다 세밀하지는 않지만 일부 사용 사례에서는 더 간단할 수 있습니다.
• React.memo: props를 기반으로 함수형 컴포넌트를 메모이즈하는 고차 컴포넌트(HOC)입니다. useMemo와 유사하지만 전체 컴포넌트에 적용됩니다.
• Redux (또는 유사한 상태 관리 라이브러리): 이미 Redux나 유사한 라이브러리를 사용하고 있다면, 해당 라이브러리의 셀렉터 기능을 활용하여 스토어에서 필요한 데이터만 선택하세요.
• 컨텍스트 분리: 컨텍스트에 관련 없는 많은 값이 포함되어 있다면, 여러 개의 작은 컨텍스트로 분리하는 것을 고려해 보세요. 이는 개별 값이 변경될 때 리렌더링의 범위를 줄여줍니다.

결론

experimental_useContextSelector는 Context API에 크게 의존하는 React 애플리케이션을 최적화하기 위한 강력한 도구입니다. 컴포넌트가 컨텍스트 값의 특정 부분만 구독하도록 허용함으로써 불필요한 리렌더링을 크게 줄이고 성능을 향상시킬 수 있습니다. 그러나 신중하게 사용하고 그 한계와 대안을 신중하게 고려하는 것이 중요합니다. experimental_useContextSelector가 실제로 이점을 제공하는지 확인하고 과잉 최적화를 하지 않도록 애플리케이션의 성능을 프로파일링하는 것을 잊지 마세요.

experimental_useContextSelector를 프로덕션에 통합하기 전에, 기존 코드베이스와의 호환성을 철저히 테스트하고 실험적 특성으로 인한 향후 API 변경 가능성을 인지해야 합니다. 신중한 계획과 구현을 통해 experimental_useContextSelector는 전 세계 사용자를 위한 고성능 React 애플리케이션을 구축하는 데 귀중한 자산이 될 수 있습니다.

추가 자료

• React 공식 문서
• React GitHub 저장소
• React useContext 훅 문서