Custom Hooks

보통 훅 이름을 useSomething 이라고 붙입니다.
훅의 특징은 훅 또는 함수컴포넌트안에서만 실행이 가능합니다.
그래서 훅안에 다른 훅을 쓸 수 있습니다.

앞에서 배운 useState와 useEffect 를 가지고, 나만의 훅을 만들어 보겠습니다.
예시) 브라우저의 가로 창 사이즈가 변경 됐을 때, 그 변경된 숫자를 받아오는 훅을 만들어 보겠습니다.

function useWindowWidth() {
  console.log("useWindowWidth() start");
  const [width, setWidth] = React.useState(window.innerWidth);
  console.log("after useState");

  React.useEffect(() => {
    console.log("useEffect start");
    const resize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener("resize", resize);

    return () => {
      console.log("unmount");
      window.removeEventListener("resize", resize);
    };
  }, []);

  console.log("useWindowWidth() end");
  return width;
}

function App() {
  console.log("App start");
  const width = useWindowWidth();

  console.log("App end");
  return <div>너비값 : {width}</div>;
}

(아래) 화면 출력

(아래) 첫 mount 시 결과

(아래) 그 이후 너비값을 바꾸며 update시 반복되는 결과

커스텀 훅인 useWindowWidth 함수 안에는 useState가 존재하고, addEventListener에 등록한 'resize'이벤트에 의해서 setState로 state를 갱신해줍니다. state가 바뀌어 App 컴포넌트가 재실행됩니다.

커스텀 훅을 사용함으로써 해당 커스텀 로직을 컴포넌트 밖에 함수로 만들 수 있고 이것을 다른 컴포넌트에서도 재활용할 수 있습니다.

우리는 state를 활용한 재사용할 수 있는 로직을 만들어낸 것이고, class컴포넌트에서 함수컴포넌트의 useState와 useEffect가 생긴 의의를 생각해 볼 때, state를 재활용하기 위함이다. 라고 볼 수 있습니다.

useHasMounted vs withHasMounted

HOC와 비교해서 한번 실습해보겠습니다.