Error: Invalid Hook Call Warning

 

훅에 관한 오류인듯 싶다.

1. 발생 계기

react-slick 을 설치한 뒤, 어느정도의 슬라이드 포맷을 맞추고 다시 next.js 의 npm run dev 를 통해 실행시켰을 때, 발생하였던 오류였다. 즉, 슬라이더가 작용될 랜더링에서 발생하였다.

 

2. 탐구해본 원인

잘못된 훗(hook) 호출이라는 오류같다. 훅은 오직 함수 컴포넌트 내부에서 불리어져야 한다는 점에서 뭔가 오류가 발생한듯 얘기하지만, 다 따지고 들어가보면 잘못작성된 부분은 없었다. 

그래서 그 다음으로 번호로 알려주는 3가지의 체크 사항에 대해서 따져봐야 할 것 같았다.

 

1. You might have mismatching versions of React and React DOM.

: 말 그대로 React 버전과 React Dom 의 버전이 맞는지 확인해보라는 뜻 같다. 다만 둘 간의 버전차이를 말하는건지, react-slick 이 의존하는 버전에 맞추라는 건지는 햇갈렸다. 일단 다음 조건들도 한번 살펴보았다

 

2. You might be breaking the Rules of Hooks.

: 훅의 규칙에 어긋나게 작성하였다는 이야기이다. 보통 훅의 규칙은 함수 컴포넌트 내부 맨 상단에서 훅을 정의하여야 하며, render 부분에 정의한다던지, 내부 함수안에서 정의한다던지 하면 오류가 발생하는 것으로 알고 있다. 살펴보니 그런적은 없는 것 같다.

 

이렇게 세번쩨 이유까지 가려고 하다가 다시 살펴보니.... 세상에 React Dom 을 설치하지 않았다.. 

이전 프로젝트 때 react-dom 을 따로 잘 설치했었는지는 의문이었는데, 여튼 이것이 문제일 것이라 판단하였다. 

 

3. 해결 과정

리엑트 버전과 일치하게 설치하였다.

React-Dom 을 react 버전에 맞도록 설치하였고, 다시 실행해보니 문제가 해결되었다.

 

참고로 이 오류는 생각보다 더 자주 일어나느 문제인듯 싶다. 그래서 공식문서에도 친절하게 이유가 적혀있는데, 이를 참조하였었다.

https://reactjs.org/warnings/invalid-hook-call-warning.html

Invalid Hook Call Warning – React

더 궁금한게 있다면 참조해보는것을 추천한다.