반복 로직 찾기
여러 컴포넌트에서 같은 state, effect, handler 조합이 보이는지 찾는다.
커스텀 훅 입출력 계약
같은 훅 조합이 여러 컴포넌트에 반복되면 추출 후보가 된다. 단, 먼저 어떤 값을 받고 무엇을 반환할지 명확히 해야 재사용성이 생긴다.
입력 정하기
초기값, key, URL, 옵션처럼 외부에서 달라지는 값을 매개변수로 둔다.
반환값 정하기
컴포넌트가 렌더링에 필요한 상태와 호출할 함수를 배열 또는 객체로 반환한다.
효과 정리
내부 effect가 타이머, 저장소, 요청을 사용하면 cleanup까지 함께 숨긴다.
use로 시작
React와 lint가 훅 규칙을 추적할 수 있도록 이름을 맞춘다.
UI는 반환하지 않기
커스텀 훅은 로직을 반환하고, 화면 구조는 컴포넌트에 둔다.
API를 작게 유지
반환값이 커지면 훅을 둘로 나누거나 책임을 다시 정리한다.