FrontEnd/React.js
[React.js] Error : React Hook "useState" is called in a function "customPage" which is neither a React function or a custom React Hook function
푸고배
2021. 9. 27. 21:33
React Hook을 사용한다면, 함수형 컴포넌트가 반드시 대문자로 시작해야 한다.
해당 에러는 함수형 컴포넌트를 customPage과 같이 소문자로 시작하는 이름으로 지정해서 생기는 에러이다.
Hook은 JavaScript 함수이지만 사용할 때 두 가지 규칙을 따라야 한다.
최상위 수준에서만 Hook 호출
루프, 조건 또는 중첩 함수 내에서 Hook를 호출하지 않는다. 대신, 조기 반환 전에 항상 React 함수의 최상위 수준에서 Hooks를 사용하라. 이 규칙을 따르면 구성 요소가 렌더링될 때마다 후크가 동일한 순서로 호출된다. 이것이 React가 다중 호출 useState과 useEffect 호출 사이의 Hook 상태를 올바르게 보존할 수 있게 해준다.
React Functions에서만 Hook 호출
일반 JavaScript 함수에서 Hooks를 호출하지 않는다. 대신 다음을 수행할 수 있다.
- ✅ React 함수 구성 요소에서 후크를 호출한다. (function 이름은 반드시 대문자로 시작)
- ✅ 사용자 정의 Hooks에서 Hooks를 호출한다. (custom hook 이름은 반드시 use로 시작)
이 규칙을 따르면 구성 요소의 모든 상태 저장 논리가 소스 코드에서 명확하게 표시된다.
이러한 규칙을 자동으로 적용 하는 린터 플러그인 을 제공한다 .
반응형