[React] Invalid hook call
토이프로젝트 진행하다가 만난 오류이다. hook 관련 오류 인것으로 보아 useState() 부분에서의 오류가 있나 싶어서 살펴봤지만 코드상의 오류는 없었다.
리액트 공식 홈페이지에서 확인해본 결과, 이러한 오류가 나는 이유는 보통 세 가지가 있다고 한다.
- React, React DOM의 버전 불일치
- React 16.8.0 이상의 버전에서만 Hooks를 지원함
- Hooks 규칙의 위반
- Hooks는 함수 컴포넌트를 렌더링하는 동안에만 호출할 수 있음 ( 리액트 공식 홈페이지 - Hook의 규칙 )
- 한 앱에 여러 React의 존재
- 어플리케이션 코드에서 가져온 react와 React DOM에서 가져온 react가 같은 모듈이어야 함
확인해본 결과 리액트 버전은 18.2.0 버전이고, 코드상의 오류도 없었으므로 1번과 2번은 원인이 아니었다.
따라서 3번이 원인인지 확인해보기 위해 리액트 공식 홈페이지에서 제시한 로그출력 방법을 사용해보았다.
// node_modules/react-dom/index.js에 아래를 추가하세요.
window.React1 = require('react');
// 컴포넌트 파일에 아래를 추가하세요.
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
// false가 출력되면 두개의 react가 있는 것입니다.역시 false가 출력되어, 중복되는 react를 해결할 필요가 있었다.
라이브러리의 react 의존성 문제인것 같았는데, 프로젝트 초반이라 사용중인 라이브러리는 @material-ui 관련 라이브러리밖에 없었다.
따라서 node_modules 디렉토리와 package-lock.json을 삭제한 후 npm과 라이브러리를 다시 설치하니 해결되었다.
# node_modules와 package-lock.json 삭제
rm -rf node_modules
rm -f package-lock.json
# npm 캐시 비우기
npm cache clean --force
# npm 설치
npm install
# 라이브러리 재설치
npm install @material-ui/core
npm install @material-ui/icons참고사이트
