React useToggler 훅

소개

이 랩에서는 React 의 useToggler 훅을 살펴보겠습니다. 이 훅은 두 상태 간에 토글될 수 있는 부울 (boolean) 상태 변수를 생성하는 간단하고 효율적인 방법을 제공합니다. 이 랩을 마치면 컴포넌트의 토글 기능을 생성하기 위해 React 애플리케이션에서 이 훅을 사용하는 방법에 대한 더 나은 이해를 얻게 될 것입니다.

React useToggler 훅

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

두 상태 간에 토글될 수 있는 부울 (boolean) 상태 변수를 생성하려면 다음 단계를 따르세요.

1. useState() 훅을 사용하여 value 상태 변수와 해당 setter 를 생성합니다.
2. useCallback() 훅을 사용하여 value 상태 변수의 값을 토글하고 메모이제이션 (memoization) 하는 함수를 생성합니다.
3. value 상태 변수와 메모이제이션된 토글러 함수를 반환합니다.

다음은 구현 예시입니다.

const useToggler = (initialState) => {
  const [value, setValue] = React.useState(initialState);

  const toggleValue = React.useCallback(() => setValue((prev) => !prev), []);

  return [value, toggleValue];
};

그런 다음 다음과 같이 컴포넌트에서 이 훅을 사용할 수 있습니다.

const Switch = () => {
  const [val, toggleVal] = useToggler(false);
  return <button ? "ON" : "OFF"}</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<Switch />);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하세요. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! React useToggler 훅 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.