[React] React Hook "useSelector" cannot be called inside a callback 에러 및 해결 방법

Intro

안녕하세요. react hook useSelector 를 사용하던 도중 아래의 에러가 발생했습니다. 
 

React Hook "useSelector" cannot be called inside a callback

 

function YourComponent() {
      useEffect(() => {
        useSelector((state: RootState) => state.code[SOME_DATA])
      }, [])
}

 

Why?

react hook을 사용할 때는 중요한 2가지 규칙이 있습니다. 

 

1️⃣ Only Call Hooks at the Top Level

루프 조건 또는 중첩된 함수 내에서 Hooks를 호출할 수 없습니다. 항상 React 함수의 Top Level에서 Hooks를 사용해야 합니다. 이 규칙을 따르면 Component가 렌더링될 때마다  Hoooks이 동일한 순서로 호출됩니다. 
 

2️⃣ Only Call Hooks from React Functions

일반 JavaScript Function에서 Hooks를 호출할 수 없습니다. 

 

My Case

제 경우 해당 규칙에 위반했기 때문에 다음의 에러가 발생했던 것입니다. 

 

How to solve the problem

useSelector를 직접 useEffect 밖에서 호출하고 필요한 데이터를 추출한 다음에 useEffect 내부에서 사용하여 코드를 수정하였습니다.  useSelector가 useEffect 내부에서 직접 호출되는 것이 아니라, someData라는 변수에 저장된 데이터를 추출한 후 useEffect 내에서 사용할 수 있게 됩니다. 따라서 React Hook 규칙을 준수하게 됩니다 :)

function YourComponent() {
  const someData = useSelector((state: RootState) => state.code[SOME_DATA]);

  useEffect(() => {
    // 예: console.log(someData);
  }, [someData]);

  // 나머지 컴포넌트 코드...
}

 

---

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