Invalid hook call 오류

코드를 치고 화면을 렌더링 하니 이런 오류가 떴다.

겁먹지 말고, 첫번째 오류부터 해결해나가보겠다....


react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

공식문서를 보면, 3가지 가능성이 있다고 했다
1. 리액트와 renderer의 버전호환문제
2. 훅규칙을 어긴것
3. 같은 앱에 중복된 리액트가 설치되어 있는것

보이는 사진과 같이 1번과 3번은 오류가 없다.






그렇다면 2번이 문제인데, 이 훅의 규칙을 어겼다는 것이 정확히 뭘까??

The above error occurred in the <BrowserRouter> component:

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:46959:5)
    at Provider (http://localhost:3000/static/js/bundle.js:35595:5)

<BrowserRouter>에 문제가 생긴건가 보니, 내가 리액트 라우터를 설치하지 않고,
import하고 코드에 렌더 하려고 하니 문제가 생긴것이다


이 문제는 초기세팅을 강의를 따라서 보고 치다보니까, 이전 강의에서 라우팅 했던 것을 전제로 하는 코드를 작성했기 때문이다.
강의든, 문서든 무지성으로 코드를 따라치면 안된다.
코드 한줄을 치더라도, 왜 이코드를 썼는지 생각하면서 써야 한다


나는 연습삼아 하나의 페이지에서 리덕스를 사용해서 상태관리를 해보려고 하기 때문에,
<BrowserRouter>는 지워주었다.

 

 

이렇게 하니 문제가 해결되었다. 에러없이 코드가 잘 뜨는 것을 확인할 수 있었다.