react(리액트)에서 hook은 왜 최상단에서 호출해야할까?

이전에 custom hook을 만들며, hook의 특징을 간략하게 포스팅 한 적이 있다. (https://hyermione.tistory.com/89) 많은 특징들과 규칙이 있었는데, 그 중 하나인 hook이 컴포넌트 최상위에서 로드 되어야 하는 이유에 대하여 정리해 보려고 한다.

 

✔️ Hook에 대한 궁금증

---

한 컴포넌트에서는 여러개의 hook을 사용할 수 있음은 우리 모두가 알고 있다. 그렇다면 여러가지 hook 중에서 어떤 state가 어떤 useState에 해당하는지 등에 대한 것은 어떻게 알 수 있는지 궁금해 해 본 적이 (나는 없지만...) 있는가? 모든 랜더링에서 hook의 호출 순서는 동일하고, 리액트는 hook이 호출되는 순서에 의해 전적으로 의지하고 있기 때문에 가능한 것이다. 

 

✔️ Hook의 규칙을 깨면 어떻게 될까?

---

어떤 컴포넌트가 다음과 같은 예시로 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가 대체됩니다.

아마 세 번째, 네 번째 랜더링에서도 순서는 달라지지 않을 것이다. 이렇게 랜더링을 기대하는 와중에 다음과 같은 조건을 넣어 hook을 부른다고 생각해보자. 이는 조건문을 넣어 최상위에서 로드되어야 하는 Hook의 규칙을 깬 것이다.

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

이러면 두 번째에 호출 되어야 하는 useEffect(persistFrom)이 건너뛰는 사례가 발생하게 된다. 랜더링에서 두 번째로 반환을 기대했던 hook에서 기대만큼의 답을 얻지 못 했기 때문에 순서가 꼬인 로직은 하나씩 버그를 발생시키게 된다.

 

✔️ 조건문을 넣어 Hook을 실행시키고 싶다면?

---

만약 특정 조건을 충족시킬 때에만 hook을 실행시키고 싶다면 어떻게 해야할까. 간단하다. 작은 발상의 전환만 있다면... 상단의 코드는 다음과 같이 수정할 수 있을것이다.

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

조건문 내부에 hook을 심는게 아니라 hook 내부에 조건문을 심어 조건문이 충족할 때에만 로직을 실행시켜주면 된다.