이 글에서는 앱에서 React.Context를 제거하는 방법을 살펴보고 그렇게 하는 동기를 찾을 것입니다.

당신은 아마도 React에 대해 잘 알고 있고 이미 React.Context에 대한 경험이 있을 것입니다. 이 글을 접하게 된다면, 그렇지 않더라도 이 글을 읽고 관심이 있는 사람들과 공유하시기 바랍니다.

1. React.Context를 피하는 이유는 무엇입니까?

컨텍스트는 가독성을 저하시키고 앱을 얽히고 제한합니다.

다음 기본 예를 살펴보세요.

너무 이해하기 쉽고 신뢰할 수 있어 보이지 않나요?

컨텍스트를 사용할 때 발생할 수 있는 몇 가지 문제는 다음과 같습니다.

1. 더 많은 컨텍스트를 사용할수록 앱의 가독성과 제어성이 떨어집니다.
2. 때때로 중첩된 컨텍스트가 작동하려면 올바른 순서가 필요하므로 앱을 유지 관리하기가 어렵습니다.
3. 계속 제대로 작동하려면 테스트 환경을 설정하는 동안 일부 컨텍스트를 재사용해야 합니다.
4. 구성 요소가 필요한 컨텍스트 제공자의 트리 아래에 있는 하위인지 확인해야 합니다.

재미있는 사실: 잘 알려진 '약속지옥'은 비슷해 보입니다. ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

2. React.Context를 어떻게 교체하나요?

대신 후크를 생성하세요.

위 예제의 ThemeContext를 사용자 정의 useTheme 후크로 바꾸겠습니다.

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

useTheme 후크의 모든 인스턴스가 테마 상태를 동기화하기 위해 통신할 수 있도록 use-app-events라는 npm 패키지를 사용했습니다. useTheme이 앱 주변에서 여러 번 호출될 때 테마 값이 동일하도록 보장합니다.

또한 use-app-events 패키지 덕분에 브라우저 탭 간에도 테마가 동기화됩니다.

이 시점에서는 useTheme 후크를 앱의 어느 곳에서나 사용하여 현재 테마를 가져오고 업데이트할 수 있으므로 ThemeContext가 더 이상 필요하지 않습니다.

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: 
Current theme: light
  return 
Current theme: {theme}
;
}

이 접근 방식의 장점은 무엇입니까:

1. 어린이가 사용하기 전에 나무 위 어딘가에 고리를 설치할 필요가 없습니다(테스트 환경 포함).
2. 렌더링 구조가 더 깔끔해졌습니다. 즉, 컨텍스트에 따라 구축된 화살표 모양 구조가 더 이상 혼란스럽지 않습니다.
3. 탭 간에 상태가 동기화됩니다.

결론

React.Context는 확실히 얼마 전까지만 해도 강력한 도구였지만, use-app-events 패키지와 함께 적절하게 구현된다면 후크는 앱의 전역 상태를 관리하는 보다 제어되고 안정적인 방법을 제공합니다.