[React.js] Error : React Hook "useState" is called in a function "customPage" which is neither a React function or a custom React Hook function

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로 시작)

이 규칙을 따르면 구성 요소의 모든 상태 저장 논리가 소스 코드에서 명확하게 표시된다.

이러한 규칙을 자동으로 적용 하는 린터 플러그인 을 제공한다 .