•
Hook은 무조건 최상위 레벨에서만 호출해야 한다.
◦
최상위 레벨 : React 함수 컴포넌트의 최상위 레벨
◦
반복문, 조건문 안에서 hook을 호출하면 안 된다!
•
Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.
•
잘못된 Hook 사용법
•
리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.
•
eslint-plugin-react-hook 패키지
◦
Hook의 규칙을 따르도록 강제해주는 플러그인
•
Custom Hook 만들기
◦
여러 컴포넌트에서 반복적으로 사용되는 로직을 Hook으로 만들어 재사용하기 위함이다.
◦
상황 및 예제 코드
•
Custom Hook 추출
◦
이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수
◦
커스텀 훅은 특별한 규칙이 없다.
•
Custom Hook 사용
•
Custom Hook의 이름은 꼭 use로 시작해야 한다.
•
여러 개의 컴포넌트에서 하나의 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다.
•
각 Custom Hook 호출에 대해서 분리된 state를 얻게 된다.
•
각 Custom Hook 호출 또한 완전히 독립적이다.
•
Hook들 사이에서 데이터를 공유하는 예제 코드
