[TIL] ReactJS - Uncaught Error: Invalid hook call

오늘 공부한것 & 기억하고 싶은 내용

react-router-dom을 사용해서 링크 이동에 대해서 강의를 들었다.

import { useEffect } from "react";
import { useParams } from "react-router-dom";

useParams을 import한 것까지는 화면이 잘 로드돼서 데이터를 불러왔는데

function Detail() {
let x = useParams();
console.log(x);
return Detail;
}

useParams()을 호출하면 Uncaught Error: Invalid hook call이라는 에러를 뱉어냈다.

찾아보니 react와 react-router-dom 호환 문제 일수도 있다고 했다.

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

여기에 나름의 해결책이 있어서 찾아보았으나 나는 불가능했다..

사실 나는 react-router-dom이 안깔려 있는지 package.json에 버전기록이 없었다.
그래서 "dependencies" 안에 "react-router-dom": "^5.3.4",를 강제로 넣어주었다.

그리고 npm install을 하니 잘 나왔다!!!!

react-router-dom 이 있는지 확인하려면
터미널에 npm list react-router-dom을 쳐보면 버전이 나온다.
그걸 넣었더니 됐다.. (vscode의 터미널 폴더 경로 필수로 체크하자.. 아무래도 다른 폴더에서 dom 설치가 된거 같다.. ㅎㅎ)

배운점 & 느낀점

페이지 이동이 되어야 하는데 자꾸 안돼서 초조해하다가
차근차근 package.json도 까보니 해결되었다.
초조해하지말고 천천히 찾아보면 정답은 내부에 다 있다...
사실 범인은 바로 나 ... 😭