[해결 방법] React Hook "useState" is called in function "emailReducer" that is neither a React function component nor a custom React Hook function

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

 

 

발생 Error

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

const emailReducer = (state, action) => {
  useState();
 
  if(action.type === 'USER_INPUT'){
    return {value : action.value, isValid: action.value.includes('@')};
  }
  if(action.type === 'INPUT_BLUR'){
    return {value : state.value, isValid: state.value.includes('@')};
  }
 
  return {value: '', isValid: false};
};
 

🚨 다음과 같은 오류 발생

React Hook "useState" is called in function "emailReducer" that is neither a React function component nor a custom React Hook function.

React component names must start with an uppercase letter. React Hook names must start with the word "use"

 

 

발생 원인

use로 시작하는 ReactHook을 React 함수(returnType JSX) 또는 사용자 정의 함수 밖에서 호출

 

 

해결 방법

ReactHook을 React 함수(returnType JSX) 또는 사용자 정의 함수 안에서 호출