React Hooks의 규칙

리액트 훅은 단순히 use로 시작하는 모든 함수입니다.
리액트 훅으로 작업할 때 중요한 규칙이 두개 있습니다.

1. 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅에서만 호출해야합니다.

const somethingFunction = (a, b) => {
  const [name, setName] = useState(''); // <-- 에러에러에러에러에러
  return a + b;
};

2. 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅 함수의 최상위 수준에서만 호출해야합니다.

• 중첩함수나 block문에서 호출하면 안됩니다.

const somethingComponent = (a, b) => {
  useEffect(() => {
	  const [name, setName] = useState(''); // <-- 에러에러에러에러에러
  }, [])
  return <>something</>;
};

추가적으로 useEffect 훅에 대한 규칙도 하나 더 알아봅시다!
useEffect는 항상 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야합니다!