Uncaught Error: 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:

 

 

 

로그인에 성공한 후, 로그인 한 아이디 정보를 Redux에 저장하려고 리덕스 훅을 사용하였더니 다음과 같은 오류가 일어났다.

 

Uncaught Error: 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

 

 

콘솔에 출력된 로그에 따라서 해결법을 찾아본다.

 

1.  You might have mismatching versions of React and the renderer (such as React DOM)의 경우, react-dom의 버전이 Hook을 사용할 수 있는 버전인 16.8.0보다 낮을 때 일어날 수 있다. package.json에서 버전을 확인한다.

 

react, react-dom 모두 16.8.0 이상이기 때문에 원인이 아님을 알 수 있다.

 

2. You might be breaking the Rules of Hooks 는 말 그대로 Hook의 사용 규칙을 어겨서 일어나는 문제라는 뜻이다.

 

공식 문서에 적힌 Hook 사용 규칙

• ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하세요.
• ✅ 사용자 정의 Hook 본체의 최상위 레벨에서 호출하세요.

Hook은 컴포넌트의 최상위 레벨에서 호출되어야 한다. 나는 '버튼을 누르면 axios를 통해 서버에 api호출을 하고, 그 뒤 리덕스에 넣도록 코드를 구성하였다.

 

Login.js

function doLogin() {       let body = {         email:userEmail,         password:userPassword       }       axios.post('/api/user/login',body )       .then(response => {console.log('로그인 정보 전송함..', response)                    dispatch(setUser(userEmail))       dispatch(isSuccess(true))                   console.log('리덕스에 저장된 정보 출력',Rstore)     })   }

 

혹시 모르니 아래와 같이 바꿔본다 ...

 

function doLogin() {       let body = {         email:userEmail,         password:userPassword       }       axios.post('/api/user/login',body )       .then(response => {console.log('로그인 정보 전송함..', response)                 // 로그인 성공했을 경우 redux에 userEmail을 저장하기 위해,       // 로그인 스테이터스에 성공/실패값을 저장함(200일 경우 성공)        loginStatus = response.status     })   }   function saveRedux() {     if (loginStatus===200) {       dispatch(setUser(userEmail))       dispatch(isSuccess(true))                   console.log('리덕스에 저장된 정보 출력',Rstore)     }   }

 

하지만 안됐음.. 불러오는 위치는 이상이 없었던 것으로 ㅠㅠ 

 

 

3. You might have more than one copy of React in the same app 의 경우 패키지 폴더 내에 react 패키지가 중복되어 있을 가능성이 있다는 뜻으로, 아래의 방법에 따라 콘솔 출력으로 확인해 볼 수 있다.

 

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

Invalid Hook Call Warning – React

 

아래 적힌 설명에 따라 코드를 추가했을 때, 만일 콘솔에서 true가 출력된다면 리액트 패키지 중복으로 인한 오류이다.

하지만 이것도 아니었음..

 

 

 

 

수시간이 지난 뒤 원인을 찾았는데

 

 

 let dispatch = userDispatch() 에서 괄호 () 를 붙여주지 않아 제대로 dispatch를 불러오지 못했기 때문이었다.

 

 

자바스크립트는 오류 로그도 제대로 안나온다고 하더니 오늘 제대로 체감했다

 

황당......................................................................................................................................................................................