- 반복문, 조건문 혹은 중첩된 함수 내에서 hook을 호출하지 않아야 합니다!
- 항상 React 컴포넌트 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다.
- 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다.
- 따라서 React가 useState, useEffect를 여러번 호출되는 중에도 hook의 상태를 올바르게 유지할 수 있게 해줍니다.
“오직 React 함수 내에서 Hook을 호출하기”
Hook을 일반적인 JavaScript 함수에서 호출하지 마세요. 대신 아래와 같이 호출할 수 있습니다.
- React 함수 컴포넌트에서 Hook을 호출
- Custom Hook에서 Hook을 호출하세요.
lint 설정
- 이 플러그인은 Create React App에 기본적으로 포함되어 있습니다.
// ESLint 설정 파일 { "plugins": [ // ... "react-hooks" ], "rules": { // ... "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies } }