👇🏻 에러발생 추정 위치
let dispatch() = useDispatch();
function Detail(props){
(중략)
<button className="btn btn-danger" onClick={()=>{
//새로운 상품이 cart state에 추가되는 기능
dispatch(addCart(product))
}}>장바구니</button>
}
useDispatch()
라는 훅을 dispatch변수에 저장하여 사용하려고 했는데, 잘못된 곳에 훅을 호출하면서 해당 에러가 발생되는 것 같았다.
갑자기 페이지가 구동조차 되지 않으니 당황했는데, 공식 문서를 확인하니 아래 3가지 이유로 발생되는 에러인 것을 알 수 있었다.
👉🏻 useDispatch()
란?
: Redux의 store에 저장되어 있는 Action을 사용할 수 있게 하는 훅
: 내 포스팅 : [React] Redux(리덕스) 에서 확인!
React 버전은 package.json에서 확인할 수 있음
만약 버전이 16.8.0 이하라면 React 업데이트 및 재설치 해보자
내 포스팅 : [React] React (리액트) 👈🏻설치방법참고
React Invalid Hook Call Warning 에러 공식 문서
상위 공식 문서 페이지에 접속해보면, 상단에 아래 문구를 확인할 수 있음
Hooks can only be called inside the body of a function component.
: 훅은 함수형 컴포넌트 바디 안에 호출되어야 한다
2-1. 클래스형 컴포넌트 아예 컴포넌트 밖에서 단독으로 호출하는 경우
//클래스형 컴포넌트
class Err1_1 extends React.Component {
render() {
let dispatch = useDispatch();
}
}
//단독호출
let dispatch = useDispatch();
function Err1_2() {
(중략)
}
2-2. 함수형 컴포넌트 안의 일반적인 {중괄호}나 이벤트 핸들러 안에서 호출하는 경우
function Err2() {
return(
//일반적 호출
{ let dispatch = useDispatch(); }
//이벤트 핸들러 안 호출
<button onClick={()=>{ let dispatch = useDispatch(); }}>버튼</button>
)
}
2-3. 훅 내에서 훅을 호출하는 경우
function Err3() {
let memo = useMemo(()=>{
let dispatch = useDispatch();
})
}
😅 결론적으로 나는 1번 문제(단독호출) 때문에 발생한 에러였고, dispatch 변수 선언 부를 컴포넌트 바디 안으로 넣어주니 해결되었다.
/* 여기 있던 let dispatch() = useDispatch(); */
function Detail(props){
let dispatch() = useDispatch(); //여기로 옮김
(중략)
<button className="btn btn-danger" onClick={()=>{
//새로운 상품이 cart state에 추가되는 기능
dispatch(addCart(product))
}}>장바구니</button>
}
React프로젝트를 하다 보면 Redux, Styled-component, React-query 등 라이브러리나 모듈을 설치해야 하는 경우가 많은데, 이로 인해 간혹 React가 추가로 설치되면 원본 코드에서의 import와 다른 라이브러리의 import가 중복되어 호출되면 훅 실행이 어려워질 때가 있다고 한다.
나는 아직 해당 문제를 접해보진 않았지만 만약 앞서 소개한 에러발생이유 1,2번에 해당되지 않는다면 중복되는 react 파일을 검색하여 제거해보자!
터미널에 npm ls react
입력 > 에러나 중복표시가 있으면 해당 react 제거
뭐... 중복된 react가 없다면 이와같이 정상적으로 뜰 것이다.
❌ 클래스형 컴포넌트 안됨 ❌
❌ 단독호출 안됨 ❌
❌ 이벤트핸들러에서 호출 안됨 ❌
❌ 훅 내 호출 안됨 ❌
또 발견되면 추가하겠음✍🏻...