리액트 훅은 왜 컴포넌트 최상단에서 호출해야 할까?

안녕하세요 웹 36기 YB 정희연입니다.

 

React에서 아래처럼 훅을 조건문이나 반복문 안에서 사용하면 아래와 같은 에러를 보게 됩니다.

React Hook "useState" is called conditionally. 
React Hooks must be called in the exact same order in every component render.

 

처음에는 “왜 이게 문제지?” 싶지만, 이는 React의 핵심 규칙 위반으로 문제가 됩니다.
오늘은 이 규칙이 왜 필요한지, React는 내부에서 훅을 어떻게 처리하는지,
그리고 어떻게 코드를 짜야 오류 없이 안정적으로 동작하는지 설명해보겠습니다~

 

---

1. React 훅 사용 규칙

공식 문서에서 명시한 리액트 훅의 두 가지 핵심 규칙은 다음과 같습니다:

1. 훅은 함수 컴포넌트 또는 커스텀 훅에서만 호출해야 한다.
2. 훅은 컴포넌트의 최상단에서만 호출해야 한다.
   (조건문, 반복문, 함수 내부 등에서는 호출 불가)

이 규칙을 지키지 않으면 React가 상태를 추적할 수 없기 때문에, 렌더링이 꼬이게 됩니다.

 

---

2. 왜 '최상단'에서만 호출해야 할까?

React는 훅을 사용할 때마다 실행 순서대로 내부에 저장합니다.
그리고 다음 렌더링 시에도 같은 순서로 훅을 실행해서 상태나 참조값을 연결합니다!

ex) : 

function MyComponent() {
  const [count, setCount] = useState(0); // 1번째 훅
  const inputRef = useRef();            // 2번째 훅
  useEffect(() => {}, []);              // 3번째 훅
}

React는 MyComponent를 실행할 때 훅의 순서를 기준으로 상태를 연결합니다:

• 1번 상태는 count
• 2번 상태는 ref
• 3번 상태는 effect

즉, 훅은 이름이 아니라 “순서”를 기억합니다.

---

3. 훅을 조건문 안에 쓰면 어떤 일이 일어날까?

function Example({ isLoggedIn }) {
  if (isLoggedIn) {
    const [msg, setMsg] = useState('Hi'); // ❌ 조건문 안의 훅
  }

  return <div>Hello</div>;
}

 

위 코드에서 isLoggedIn이 true일 때만 useState가 호출되고,
false면 아예 호출되지 않습니다. 그러면 렌더링마다 훅 순서가 바뀌겠죠?

💭 문제점

React의 해석:

• 어떤 렌더링에는 useState가 1번째 위치에 있음
• 어떤 렌더링에는 아예 없음

이렇게 훅 호출 순서가 바뀌면,
React가 어떤 상태를 어떤 변수에 연결해야 할지 알 수 없게 되어 오류가 납니다.

---

4.  반복문 안에서도 안 된다.

function Example() {
  for (let i = 0; i < 2; i++) {
    const [value, setValue] = useState(0); // ❌ 반복문 안의 훅
  }
}

 

렌더링마다 반복 횟수가 달라지면 훅 호출 횟수도 바뀌겠죠?
이 역시 React가 상태 순서를 예측할 수 없기 때문에 오류가 납니다.

 

---

5.  어떻게 해결해야 할까?

훅은 무조건 최상단에서 호출하고, 조건이나 분기는 훅 내부에서 처리하는 방식으로 코딩해야 합니다.

function Example({ isLoggedIn }) {
  const [msg, setMsg] = useState('');

  useEffect(() => {
    if (isLoggedIn) {
      setMsg('Hi!');
    } else {
      setMsg('');
    }
  }, [isLoggedIn]);

  return <p>{msg}</p>;
}

 

이렇게 하면 훅은 항상 같은 순서로 호출되고, 조건은 훅 안에서 처리되기 때문에 안전합니다!

---

6.  React는 어떻게 훅 상태를 관리할까?

React는 내부적으로 훅 호출을 “인덱스” 기반으로 추적합니다.

---

7.  정리: 훅을 안전하게 쓰는 방법

 

• 항상 컴포넌트 함수의 최상단에서 훅 호출하기
• 조건이나 분기는 훅 내부(useEffect 등)에서 처리
• if, for, switch, 함수 안에서 훅 호출 X
• 커스텀 훅을 활용해 구조를 깔끔하게 나누는 것도 좋은 방법!

---

8. 마무리: 한 문장 요약

리액트는 훅의 이름이 아닌 호출 순서를 기반으로 상태를 저장하기 때문에,
훅은 항상 컴포넌트 최상단에서만 호출되어야 한다.

 

---

9.  참고자료

• https://ko.legacy.reactjs.org/docs/hooks-rules.html

 

Hook의 규칙 – React