커스텀 훅(Custom Hook)은 React의 기본 훅을 조합하여 개발자의 특정 요구사항에 맞게 만든 재사용 가능한 함수입니다.
CustomHook의 장점
코드의 가독성이 증가합니다.
코드의 중복사용을 피할 수 있으며, 재사용성이 증가합니다.
코드의 유지 보수가 용이해집니다.
로직 분리가 가능해집니다.
Customhook 주의사항
훅의 규칙 준수 : 커스텀 훅 역시 React 훅이므로, 훅의 규칙을 따라야 합니다. 가장 중요한 규칙은 훅은 항상 최상위 레벨에서만 호출되어야 하며, 반복문, 조건문, 중첩된 함수 내에서 호출되어서는 안됩니다. 이는 훅이 호출 순서에 의존하기 때문입니다.
커스텀 훅 이름은 'use'로 시작 : 커스텀 훅의 이름은 'use'로 시작해야 합니다. 이는 훅이라는 것을 명확히 표시하고, 린트 도구가 훅의 규칙을 올바르게 검사할 수 있게 합니다.
사이드 이펙트 관리 : 커스텀 훅 내에서 사이드 이펙트를 발생시키는 경우, 그 처리를 잘 해야합니다. 예를 들어, 비동기 작업을 수행하고 그 결과를 상태로 저장하는 커스텀 훅을 만들 때는, 컴포넌트가 언마운트된 후에 상태를 설정하려는 경우 메모리 누수를 방지하기 위해 이를 처리해야 합니다.
의존성 목록 관리 : useEffect나 useCallback과 같은 훅을 사용하는 커스텀 훅에서는 의존성 목록을 정확하게 관리해야 합니다. 의존성 목록에 필요한 값이 누락되면 예상치 못한 버그를 발생시킬 수 있습니다.
재사용성 유지 : 커스텀 훅은 로직을 재사용하기 위해 만들어집니다. 가능한 한 범용적으로 만들고, 필요한 경우 옵션을 인자로 받아 훅의 동작을 커스터마이즈 할 수 있게 만드는 것이 좋습니다.