클래스 구성 요소에서 후크 사용

hooks에서 class components을 사용할 수 있다는 것을 알고 계셨습니까?

좋아, 거짓말이야. 클래스 구성 요소에서 직접 후크를 사용할 수 없지만 render prop이 있는 래핑된 함수 구성 요소에서 후크를 사용하여 이를 달성할 수 있습니다.

이 작업을 진행하기 전에 클래스 구성 요소를 함수 구성 요소로 변환할 수 있는 경우 선호합니다. 그러나 구성 요소가 어떤 이유로든 클래스 구성 요소로 남아 있어야 하는 경우 이 패턴이 효과적입니다. 성숙한 React 코드베이스에서 작업할 때 이 시나리오가 발생할 가능성이 높습니다.

이 패턴의 장점은 후크를 사용하여 새 구성 요소를 함수 구성 요소로 빌드할 수 있다는 것입니다. 어떤 이유로든 업그레이드할 수 없는 클래스 구성 요소는 얇은 호환성 계층인 래퍼 구성 요소를 통해 동일한 기능의 이점을 얻습니다.

먼저 후크를 만들어 봅시다.

import { useEffect, useState } from "react";

export function useDarkMode() {
  // Taken from https://usehooks.com/useDarkMode/

  // For this to persist, we'd use localStorage or some other kind
  // of way to persist between sessions.
  // see e.g. https://usehooks.com/useLocalStorage/
  const [enabledState, setEnabledState] = useState(false);
  const enabled = enabledState;

  useEffect(() => {
    const className = "dark-mode";
    const element = document.body;
    if (enabled) {
      element.classList.add(className);
    } else {
      element.classList.remove(className);
    }
  }, [enabled]);
  return [enabled, setEnabledState];
}

이제 렌더링 소품이 있는 함수 구성 요소를 만들어 보겠습니다. 소품을 문자 그대로 호출할 필요는 없지만 render 목적을 전달하는 경향이 있습니다.

// I wouldn't normally call a component something like this.
// It's just to convey what it is doing for the purpose of the article
const UseDarkModeHookWrapperComponent = ({ render }) => {
  const [darkMode, setDarkMode] = useDarkMode(false);

  // Uses the render prop called render that will expose the value and
  // setter for the custom hook
  return render(darkMode, setDarkMode);
};

이제 클래스 구성 요소에서 래퍼 구성 요소를 사용하겠습니다.

export default class App extends Component {
  render() {
    return (
      <UseDarkModeHookWrapperComponent
        render={(darkMode, setDarkMode) => {
          return (
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "200px",
                gap: "2rem",
                maxWidth: "50%",
                placeItems: "center"
              }}
            >
              <ThemeToggler darkMode={darkMode} setDarkMode={setDarkMode} />
              hello
            </div>
          );
        }}
      />
    );
  }
}

그리고 짜잔! 클래스 구성 요소에서 후크를 사용하고 있습니다. 다음은 실행 중인 전체 애플리케이션입니다.



실제 사례를 보려면 Forem 코드베이스만 살펴보십시오. 여기에 useMediaQuery hook 이 있고 여기에 wrapper component 이 있습니다. 실제로 작동하는 것을 보려면 ReadingList component 에서 호출됩니다.

사진 제공: Jamie Matociños on Unsplash