React.Context를 사용하지 말고 후크를 만드세요.

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

이 기사를 처음 접하셨다면 React에 대해 잘 알고 이미 React.Context에 대한 경험이 있으실 것입니다. 하지만 그렇지 않은 경우에도 이 기사를 읽고 관심이 있는 사람들과 공유하시기 바랍니다.

---

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

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

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

<ThemeContext.Provider value={theme}>
  <AuthContext.Provider value={currentUser}>
    <ModalContext.Provider value={modal}>
      <VolumeContext.Provider value={volume}>
        <RouterProvider router={router} />
      </VolumeContext.Provider>
    </ModalContext.Provider>
  </AuthContext.Provider>
</ThemeContext.Provider>

너무 이해하기 쉽고 믿음직해 보이지 않나요?

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

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: <div>Current theme: light</div>
  return <div>Current theme: {theme}</div>;
}

접근방식의 장점은 무엇인가요?

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

---

결론

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

위 내용은 React.Context를 사용하지 말고 후크를 만드세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!