커스텀 훅

커스텀 훅을 통해 관심사를 분리

1. 로직을 분리한다.

import { useState } from "react";

export default function App() {
  const [isWhite, changeMode] = useToggle(true);
  return (
    <>
      <h1
        style={{
          backgroundColor: isWhite ? "white" : "yellow",
          color: isWhite ? "yellow" : "white",
        }}
      >
        hello-kk
      </h1>
      <button onClick={changeMode}>click!</button>
    </>
  );
}

function useToggle(defaultValue) {
  const [toggle, setToggle] = useState(defaultValue);
  const changeMode = () => {
    setToggle((prev) => !prev);
  };
  return [toggle, changeMode];
}

Hook

1. 함수 컴포넌트 또는 다른 커스텀 훅 안에서만 쓰일 수 있다.

2. 최상위 레벨에서만 호출할 수 있다:

 (1) App()함수

 (2) 다른 함수 안, loop(for문 등), if 안됨=> 어떻게 ESLint가 알려줄까? 이름 규칙이 있다. use+대문자

 

함수 안에서 다른 hook을 호출한다면 커스텀 훅, 그게 아니라면 일반 함수.