[해결 방법] React Hook "useState" cannot be called inside a callback

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

  useEffect(() => {
    useState();
 
    console.log('EFFECT RUNNING');
 
    return () => {
      console.log('EFFECT CLEANUP');
    };
  }, []);
 

🚨 다음과 같은 오류 발생

React Hook "useState" cannot be called inside a callback.

React Hooks must be called in a React function component or a custom React Hook function

 

 

발생 원인

use로 시작하는 ReactHook을 ReactHook함수 안에서의 중첩 사용 또는 최상위가 아닌 수준에서 ReactHook 호출

 

 

해결 방법

ReactHook을 최상위 수준( =Component안에서 직접적 선언)에서 React 함수(returnType JSX) 또는 사용자 정의 함수 안에서만 직접적으로 호출