Rules of Hooks

리액트 훅 사용 규칙

React Hooks를 사용할 때 지켜야할 규칙이 있습니다.

1. 모든 리액트 훅의 이름은 "use"로 시작합니다.
   ex) useState, useEffect, useReducer, useContext ,,,

2. 리액트 훅은 "함수형 컴포넌트" 또는 "커스텀 훅" 내에서만 사용할 수 있습니다.

3. 리액트 훅은 오직 "top level"에서만 사용할 수 있습니다.
   즉, 컴포넌트나 커스텀 훅 내부 중첩 함수나 if 문, block 문의 코드 블록에서는 리액트 훅을 사용할 수 없습니다.

4. useEffect, useCallback, useMemo 훅을 사용할 때 컴포넌트에서 선언된 것들 중 첫 번째 인수로 전달되는 콜백 함수에서 사용되는 "모든 것"들을 두 번째 인수인 dependency 배열에 추가해야 합니다.
   단, "상태 변경 함수"나 "내장 API", "컴포넌트 외부에서 선언된 전역 변수나 함수"는 추가할 필요는 없습니다.

5. 훅은 사용하는 순서는 언제나 동일해야 합니다.
   예를 들어, if 문 코드 블록 내 return 문이 있다면 그 뒤에도 작성이 불가능합니다.
   즉, 어떻게 실행되든지 리액트 훅이 사용되는 순서가 언제나 동일해야 합니다.