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

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

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

---

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

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

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

98a86725d72d98f2b9cabc482365e7f8
  4b90a298546767af0dfbf93180d488e9
    9ccdbad4d7cf2a5ab2f30697c3e282f0
      805c6193b8bd78f920c172a82a0e8e47
        5b13746435d164e45e11fb6d2c565337
      98e42f95a9cd80104723307a01d2a42d
    37fe62713bcc433be054e66f06fcb3ad
  30fcab49531d609f912afed89b90ce7e
f27e91231f5585982d1354585706ae4a

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

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

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: dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: light16b28748ea4df4d9c2150843fecfba68
  return dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: {theme}16b28748ea4df4d9c2150843fecfba68;
}

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

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

---

결론

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

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