[Error/React] Invalid Hook Call Warning (유효하지 않은 Hook 요청)

💻[Error/React] Invalid Hook Call Warning (유효하지 않은 Hook 요청)

• React Invalid Hook Call Warning 에러 공식 문서
• 잘못된 Hook 요청으로 인한 에러
  
  

👇🏻 에러발생 추정 위치

let dispatch() = useDispatch();

function Detail(props){
  (중략)
  <button className="btn btn-danger" onClick={()=>{
    //새로운 상품이 cart state에 추가되는 기능
    dispatch(addCart(product))
  }}>장바구니</button>
}

useDispatch()라는 훅을 dispatch변수에 저장하여 사용하려고 했는데, 잘못된 곳(컴포넌트 밖)에 훅을 호출하면서 해당 에러가 발생되었다.
다음에 또 발생하지 않게 해당 내용을 정리해보려고 한다.

👉🏻 들어가기 전에, useDispatch()란?
: Redux의 store에 저장되어 있는 Action을 사용할 수 있게 하는 훅
: 내 포스팅 : [React] Redux(리덕스) 에서 확인!

---

❓에러발생이유 3가지 & 해결방법

1. You might have mismatching versions of React and React DOM.
: React와 React DOM 버전이 16.8.0 이하일 때 발생

React 버전은 package.json에서 확인할 수 있다.

만약 버전이 16.8.0 이하라면 해당 에러가 발생할 수 있으니 React 업데이트 및 재설치 해보자.
내 포스팅 : [React] React (리액트) 👈🏻설치방법참고

---

2. You might be breaking the Rules of Hooks.
: React의 훅 룰을 어겼을 때 발생

React Invalid Hook Call Warning 에러 공식 문서
상위 공식 문서 페이지에 접속해보면, 상단에 아래 문구를 확인할 수 있음

Hooks can only be called inside the body of a function component.
: 훅은 함수형 컴포넌트 바디 안에 호출되어야 한다

❓훅 룰을 어긴 경우 3가지에 대해 알아보자

2-1. 훅을 컴포넌트 밖에서 단독으로 호출하는 경우

//❌컴포넌트 밖에서 단독호출
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(()=>{
    //❌훅 내에서 훅 호출 (현재 useMemo라는 훅 내에서 useDispatch라는 훅을 호출중)
    let dispatch = useDispatch();
  })
}

😅 결론적으로 나는 1번 문제(컴포넌트 밖 단독호출) 때문에 발생한 에러였고, useDispatch를 호출하는 부분을 컴포넌트 바디 안으로 넣어주니 해결되었다.

//let dispatch() = useDispatch();  컴포넌트 밖에 있던 useDispatch라는 훅을 ↓

function Detail(props){ //컴포넌트
  let dispatch() = useDispatch(); //⭕컴포넌트 안으로 옮김 
                                  //※훅은 반드시 컴포넌트 안에서 호출해야 함
  (중략)
}

---

3. You might have more than one copy of React in the same app.
: React나 React package가 중복 설치된 경우

우선, 동일한 앱에 React는 하나만 존재해야 한다. (React 사본이 존재하면 안됨❌)

React프로젝트를 하다 보면 Redux, Styled-component, React-query 등 라이브러리나 모듈을 설치해야 하는 경우가 많은데, 이로 인해 간혹 React가 추가로 설치되면 여러가지 버전의 코드가 충돌되어 훅 실행이 어려워질 때가 있다.

나는 아직 해당 문제를 접해보진 않았지만 만약 앞서 소개한 에러발생이유 1,2번에 해당되지 않는다면 중복되는 react 파일이 있는지 찾아보고 제거해보자.

터미널에 npm ls react 입력 > 에러나 중복표시가 있으면 해당 react 제거

중복된 react가 없다면 이와같이 정상적으로 뜰 것이다.

---

📚정리

Hooks can only be called inside the body of a function component.
: 훅은 함수형 컴포넌트 바디 안에 호출되어야 한다

❌ 컴포넌트 밖에서 단독호출 안됨 (훅은 무조건 컴포넌트 안에서 호출해야 함) ❌
❌ 이벤트핸들러에서 호출 안됨 ❌
❌ 훅 내에서 또 다른 훅 호출 안됨 ❌