React 실행오류 - rendered fewer hooks than expected (feat. Hook의 규칙)

 

 

어느날 새발자는 커스텀 훅을 만들다가 다음 메시지와 에러를 만나게 되었다.

rendered fewer hooks than expected. this may be caused by an accidental early return

 

원인은 훅의 규칙를 몰랐던 것에서 비롯되었다.

→ 반복문 / 조건문 / useEffect 등 에서는 사용을 하면 안되고, 리액트 컴포넌트 내에서만 호출해야 된다.

 

---

React 실행 오류 - rendered fewer hooks than expected. this may be caused by an accidental early return (feat. Hook의 규칙)

 

훅(Hook) 이라는 개념은 처음에는 어렵고 생소했지만 리액트 형식으로 포장된 커스텀 함수 정도로 이해를 하고 사용하기 시작했다.

훅의 규칙의 개념을 이해하고 기억하기 위해 나만의 방식으로 공식문서를 공부하여 정리해보았다.

 

 

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

 

Hook 은 리액트 함수의 최상위에서 호출해야 한다. 리액트는 Hook이 호출되는 순서에 의존하기 때문이다. 

Hook 의 최상위 호출을 통해 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook 이 호출되는 것이 보장된다.

 

→ 최상위 컴포넌트가 아닌 반복문, 조건문, 중첩함수 등의 한단계 안쪽의 inner depth 로 들어가 호출하면 안된다.

→ Hook 의 실행 순서를 지키기 위해서이다. 그래야 올바른 동작을 보장받을 수 있다.

(** 조건에 따라 Hook 의 실행 유무가 변경된다면 순번표 뽑고 대기중이던 그 다음 순서의 Hook 은 우왕자왕 버그를 만들 수 있다.)

 

Don’t call Hooks inside loops, conditions, or nested functions.
Instead, always use Hooks at the top level of your React function.
By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

 

 

 

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

 

React 함수 컴포넌트 & Custom Hook 안에서 Hook을 호출할 수 있다.

 

 

** Custom Hook

말 나온김에 Custom Hook 의 개념에 대해 좀더 자세히 알아보자.

 

React Component 는 주로 인수는 props 를 받고, 반환값이 HTML tag 들로 받는 구조가 정해져 있다.

Custom Hook 은  인수와 반환 값 등을 사용자가 결정할 수 있다. (공통의 코드를 뽑아내 새로운 함수로 만든 것뿐)

Custom Hook 안에서 useState와 useEffect 등을 맘껏 사용할 수 있으며, 함수 스코프 내의 state 라서 완전히 독립적이다. 

→ 관습적으로 Hook의 디자인을 따른다 (ReactComponent 와 비슷비슷하게 생겼다)

→ 관습적으로 use____ 식으로 이름을 짓는다

 

 

 

 

 

 

ref:

Hook의 규칙 – React