TIL 33 React - Hook 사용 규칙

Hook을 사용할 때 2가지 사항을 꼭 지켜야한다.

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

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 또한, early return이 실행되기 전 React 함수의 최상위에서 Hook을 호출해야 한다.

이 규칙을 따르면 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.

만약 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 에러가 발생한다.

early return이 실행되고 Hook을 호출하면 아래와 같은 에러가 발생한다.

early return보다 위에 있어야 에러가 발생하지 않는다.

에러가 나는 이유는 Hook은 호출 순서에 의존하기 때문이다. 만약 조건문이나 반목문의 조건에 따라 실행된다면 실행이 될 수도 되지 않을 수도 있다. 그렇게 되면 호출순서가 보장되지 않고 순서가 밀려 버그가 발생할 수도 있다.

그래서 항상 컴포넌트 최상위에서 Hook이 호출되어야 하고, 조건부로 effect를 실행하려면 Hook 내부에 조건문을 넣어야 한다.

  useEffect(function persistForm() {
    if (!name) {
      localStorage.setItem('formData', name);
    }
  });

React 함수 내에서만 Hook을 호출해야 한다.

Hook은 일반적인 JavaScript 함수에서 호출하면 안된다. Hook은 아래와 같이 호출되어야 한다.

React 함수 컴포넌트에서 Hook을 호출해야 한다.
Custom Hook에서 Hook을 호출해야 한다.