React Hook 작성 규칙

1. 반드시 최상위 레벨에서 호출할 것

리액트에서 훅이란 use 로 시작하는 함수를 일컫는다.

이 훅을 반복문, 조건문, 중첩 함수 또는 try/catch/finally 블록 내부에서 호출해선 안된다.

훅은 항상 리액트 함수의 최상위 레벨에서 호출해야 하며, early return 혹은 return 이전에 사용해야 한다.

훅은 리액트가 함수 컴포넌트를 렌더링하는 동안에만 호출할 수 있다.

function Counter() {
  // ✅ 함수 컴포넌트의 최상위 레벨에서 사용합니다
  const [count, setCount] = useState(0);
  // ...
}

function useWindowWidth() {
  // ✅ 커스텀 Hook의 최상위 레벨에서 사용합니다
  const [width, setWidth] = useState(window.innerWidth);
  // ...
}

아래의 경우와 같이 훅을 사용하는 것은 오류를 발생시킬 수 있다.

• 🔴 조건문이나 반복문 내부에서 Hook을 호출하지 마세요.
• 🔴 조건부 return문 이후에 Hook을 호출하지 마세요.
• 🔴 이벤트 핸들러에서 Hook을 호출하지 마세요.
• 🔴 클래스 컴포넌트에서 Hook을 호출하지 마세요.
• 🔴 useMemo, useReducer, useEffect에 전달된 함수 내부에서 Hook을 호출하지 마세요.
• 🔴 try/catch/finally 블록 내부에서 Hook을 호출하지 마세요.

2. 반드시 React 함수에서만 호출할 것.

이 말은 곧 컴포넌트를 렌더링하는 컴포넌트 함수에서만 실행하라는 의미이다.

(대문자로 시작하는 JSX/TSX 파일 혹은 함수)