Return 문은 Hook 아래쪽에 있어야한다 :Hook 규칙

 

🌈 에러

아래 코드를 실행시키면 이런 에러가 뜬다.  코드에서 어떤 부분이 잘못 됐을까?? 

답은 if 문의 return 값이 hook인 useEffect 보다 위에 있기 때문이다. 그럼이게 왜 잘못된 것일까??

이것을 이해하기 위해선 Hook 작동원리에 대해서 이해해야한다.

 

Error

Rendered more hooks than during the previous render.

function Form() {

  const [name, setName] = useState('Mary');

  if(!name == ''){return null}

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

}

 

☀️ Hook의 규칙

        Hook은 컴포넌트가 랜더링 될 때마다 항상 동일한 순서 로 호출되도록 보장되야한다.       

 

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

=> 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안되고 early return이 실행되기 전에 hook를 호출해야한다

 

2) 오직 React 함수 내에서 Hook을 호출해야 한다.

 

⭐️ 예시)

아래 코드를 실행시키면 어떤 랜더링이 실행될까?

function Form() {
  // 1. name이라는 state 변수를 사용하세요.
  const [name, setName] = useState('Mary');

  // 2. Effect를 사용해 폼 데이터를 저장하세요.
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. surname이라는 state 변수를 사용하세요.
  const [surname, setSurname] = useState('Poppins');

  // 4. Effect를 사용해서 제목을 업데이트합니다.
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

 

아래같은 랜더링 순서가 나타난다. 즉 hook은 첫번째,두번째,세번째... 랜더링이 진행되더라도 동일한 순서로 호출되야한다.

// ------------
// 첫 번째 렌더링
// ------------
useState('Mary')           // 1. 'Mary'라는 name state 변수를 선언합니다.
useEffect(persistForm)     // 2. 폼 데이터를 저장하기 위한 effect를 추가합니다.
useState('Poppins')        // 3. 'Poppins'라는 surname state 변수를 선언합니다.
useEffect(updateTitle)     // 4. 제목을 업데이트하기 위한 effect를 추가합니다.

// -------------
// 두 번째 렌더링
// -------------
useState('Mary')           // 1. name state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(persistForm)     // 2. 폼 데이터를 저장하기 위한 effect가 대체됩니다.
useState('Poppins')        // 3. surname state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(updateTitle)     // 4. 제목을 업데이트하기 위한 effect가 대체됩니다.

// ...

 

그런데 갑작스레 아래 처럼 useEffect 를 if 문으로 감싸면 어떤 문제가 발생할까?

  // 🔴 조건문에 Hook을 사용함으로써 첫 번째 규칙을 깼습니다
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

 

Hook의 실행순서에서 두번째 랜더링에서 useEffect(persisitForm)이 생략된다. name에 'Mary'이 할당되있기 때문.

이로 인해 첫번째 랜더링과 두번째 랜더링 시 hooks의 호출순서가 달라지므로 에러가 나타난다.

useState('Mary')           // 1. name state 변수를 읽습니다. (인자는 무시됩니다)
// useEffect(persistForm)  // 🔴 Hook을 건너뛰었습니다!
useState('Poppins')        // 🔴 2 (3이었던). surname state 변수를 읽는 데 실패했습니다.
useEffect(updateTitle)     // 🔴 3 (4였던). 제목을 업데이트하기 위한 effect가 대체되는 데 실패했습니다.

 

따라서 Hook을 컴포넌트 최상단에서 호출해야 간섭에서 자유로울 수 있다. 또한 조건문을 쓰려면 Hook 안에서 써야한다.

 

 

---

✨ 참고)

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

Hook의 규칙 – React