[ TIL ] React Hook "useState" is called in function "control" 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".eslintr..

코드 리팩토링을 하다가 react function component 도 react custom hook 도 아닌 일반 ts함수에서 

useState와 useEffect 를 쓰려고 하니 해당 에러가 났다. 

 

이유는 useState, useEffect 같은 react hook 을 쓰려면 react hook 을 오직 react 함수 내에서 호출해야하기 때문이다.

 

react hook 을 사용할 때는 아래 두가지 규칙을 준수해야한다.  

최상위(at the Top Level)에서만 Hook을 호출해야 합니다

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState 와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해줍니다. 이 점에 대해서 궁금하다면 아래에서 자세히 설명해 드리겠습니다.

오직 React 함수 내에서 Hook을 호출해야 합니다

Hook을 일반적인 JavaScript 함수에서 호출하지 마세요. 대신 아래와 같이 호출할 수 있습니다.

• ✅ React 함수 컴포넌트에서 Hook을 호출하세요.
• ✅ Custom Hook에서 Hook을 호출하세요. (다음 페이지에서 이 부분을 살펴볼 예정입니다)

이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있습니다.

 

 

참조

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

Hook의 규칙 – React

 

하 이걸 몰랐다니 부끄럽구나 ........ 이제야도 안게 어딘가 열심히 공부하자 ! (～￣▽￣)～