Minified React error #321 : React Hook은 컴포넌트 최상위에 위치해야 한다

Error: Minified React error #321; visit 
https://reactjs.org/docs/error-decoder.html?invariant=321
 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Minified React error #321

위와 같은 에러가 떴다. 방문해보라는 페이지에 들어가면 리액트 훅과 관련된 문제라는 것을 알려준다. 

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.

https://reactjs.org/docs/error-decoder.html/?invariant=321 

React - Error Decoder

이번 경우에는 2번을 어긴 문제였다.

중간에 redux를 호출할 일이 있어서 함수 중간에 loginSeq를 정의했는데, 이 때 사용한 useSelector가 문제였다. 

 

해결방안

https://ko.reactjs.org/docs/hooks-rules.html

Hook의 규칙 – React

이곳을 확인하면 'Hook은 컴포넌트 최상위에 위치해야한다'는 규칙을 볼 수 있다. 함수 중간에 위치하던 useSelector를 최상위로 옮기자 문제가 해결되었다.