[ERROR]React Hook "useDispatch" cannot be called at the top level.

에러발생: React Hook "useDispatch" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

react hook useDispatch 를 사용중 다음과 같은 오류를 만났습니다. 최상위 수준에서 React Hook "useDispatch"를 호출할 수 없습니다. React Hook은 React 함수 컴포넌트 또는 사용자 정의 React Hook 함수에서 호출해야합니다. 

*

useDispatch는 React Redux 라이브러리에서 제공하는 React 후크입니다.

 

error 메세지

원인: React Hook 을  React 함수 컴포넌트 밖에서 호출 

Header.js

 React 함수 컴포넌트인 Header 밖에서  useDispatch 함수를 호출했습니다. 

해결: React Hook 을  React 함수 컴포넌트 안에서 호출  

정상작동하는 코드

React 함수 컴포넌트인 Header 안에서  useDispatch 함수를 호출합니다.