리액트훅을 컴포넌트 최상단에서 호출해야 하는 이유?

1. React Hook 규칙

1. Hooks는 컴포넌트의 최상단에서만 호출해야 한다.
   • 조건문, 반복문, 중첩 함수 안에서 Hook을 호출하면 안 된다.
2. Hooks는 React 함수형 컴포넌트나 커스텀 Hook 안에서만 호출해야 한다.

 

2. 주요 이유

1. React의 렌더링 흐름과 상태 관리
   • React는 컴포넌트가 렌더링될 때 Hook 호출 순서를 기준으로 상태(useState)와 부수효과(useEffect)를 추적한다. 최상단에서 호출하지 않으면 Hook 호출 순서가 달라질 가능성이 생겨 React가 상태와 효과를 잘못 연결할 수 있다.
2. 렌더링 순서와 일관성 보장 
   • Hook은 호출 순서에 따라 상태와 부수효과를 추적한다. 최상단에서 호출하면 조건문, 반복문 등에 따라 호출 순서가 달라지는 일이 없으므로 React는 컴포넌트를 예측 가능하고 안정적으로 렌더링할 수 있다.
3. React DevTools의 상태 관리와 디버깅 용이성
   • React DevTools는 컴포넌트 내에서 Hook 호출 순서를 기반으로 상태를 추적한다. Hook을 최상단에서 호출하지 않으면 DevTools가 상태를 정확히 추적하거나 디버깅하기 어려워질 수 있다.

 

3. 잘못된 예시

if (condition) {
  const [state, setState] = useState(0); // 조건에 따라 Hook 호출이 달라짐
}

💡위 코드는 조건이 달라질 때마다 useState가 호출되지 않거나 호출 순서가 변경된다. React는 어떤 상태가 어떤 useState에 연결되는지 알 수 없어 오류가 발생한다. 

 

4. 공식문서 가이드

최상위(at the Top Level)에서만 Hook을 호출해야 합니다.

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState 와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해줍니다.

 

더 알아보기 : https://ko.legacy.reactjs.org/docs/hooks-rules.html