개인 프로젝트를 하던 중
Rendered more hooks than during the previous render.
위 에러를 만나게 됐다.
에러가 난 곳은 ProductContainer 라는 컴포넌트이고,
해당 컴포넌트에선 useQuery를 통해 상품과 카테고리의 데이터를 받아오고 있었다.
그러고 cateegoryData를 프롭스로 하위 컴포넌트로 전달해주던 중cateegoryData가 null 일 수도 있다는 에러를 만나
맨 밑의 if문과 같이 작성하게 된 것이다.
gpt한테 물어보니 위와 같은 답변을 줬는데, 단번에 이해가 힘들었다.
리액트 규칙을 위반했다는건 알겠는데, 동일한 순서로 훅이 호출되지 않았고, 그로 인해 React 컴포넌트의 상태와 행동을 정확하게 추적할 수 없다는 말이 잘 이해가 가지 않았다.
알고보니 if의 리턴문 이후
다음과 같은 hook을 작성하게 되면, 리액트 컴포넌트 렌더링 프로세스 중 렌더링 단계가 아닌 커밋 단계에 훅이 호출되게 되고, 리액트는 이를 허용하지 않고 있다는 것이다.
결과적으로 리턴문 이후에 리액트 훅을 호출하였기 때문이고 그로 인해 렌더링 단계에서만 정상 작동하는 리액트 훅이 리턴문 이후 커밋 단계에 호출되었기 때문에 위 에러가 발생하는것이다.
추가적으로 해당 if문을 맨 아래로 내려서 해결이 됐지만, 그보다
다음과 같이 기본값을 설정해주면서 해결하였다.