hook-abstract-pattern

name	hook-abstract-pattern
description	이 문서는 react의 커스텀 훅을 만들 때 지켜야하는 패턴을 정의합니다. 커스텀 훅을 새롭게 만들어야 하거나, 기존의 훅을 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.

커스텀 훅 추상화 패턴 가이드라인

이 스킬은 모든 커스텀 훅들 해당 프로젝트에서 지켜져야하는 커스텀 훅 추상화 패턴을 정의합니다.

활성화 시점

• 새로운 커스텀 훅 생성
• 커스텀 훅 코드를 수정하거나 리팩토링
• 커스텀 훅 코드 리뷰

핵심 원칙

모든 커스텀 훅은 아래의 추상화 패턴을 지켜야만 합니다. 핵심적으로 모든 컴포넌트는 도메인 로직을 다루는 여부에 따라서 feature, common으로 나눕니다.

feature 훅은 특정 도메인 로직을 다루는 훅입니다. 예를 들어, 회원가입 폼에서 사용하는 useMemberForm 훅이 여기에 해당합니다.

common 훅은 도메인 로직과 상관없이 재사용 가능한 훅입니다. 예를 들어, 폼 상태 관리를 위한 useForm 훅이 여기에 해당합니다.

각 커스텀 훅은 자신의 폴더를 가지며, 해당 폴더 내에 index.tsx 파일을 통해 익스포트됩니다.

커스텀 훅에서 사용되는 유틸 파일, 서브 컴포넌트 파일, 커스텀 훅 등은 모두 해당 커스텀 훅 폴더 내에 위치해야 합니다.

index.tsx 파일에서 커스텀 훅의 메인 구현을 익스포트하며, 다른 파일들은 커스텀 훅 내부에서만 사용됩니다.

폴더 구조 예시

src/
├── hooks/
│   ├── common/
│   │   ├── useForm                       
|   |   |  ├── index.tsx                  # useForm 커스텀 훅 구현      
│   │   ├── useSMS                   
|   |   |  ├── index.tsx                  # useSMS 커스텀 훅 구현
│   │   ├── useHapticFeedback
|   |   |  ├── index.tsx                  # useHapticFeedback 커스텀 훅 구현
│   └── feature/
│       ├── useMemberForm
|       |  ├── index.tsx                  # useMemberForm 커스텀 훅 구현
│       ├── useProgramNoticeSMS
|       |  ├── index.tsx                  # useProgramNoticeSMS 커스텀 훅 구현
|       ├── useProgramNoticeHapticFeedback
|          ├── index.tsx                  # useProgramNoticeHapticFeedback 커스텀 훅 구현

feature 훅과 common 훅의 관계

feature 훅은 common 훅을 사용할 수 있지만, common 훅은 feature 훅을 사용할 수 없습니다. 이는 도메인 로직이 포함된 훅이 도메인 로직과 상관없는 훅에 의존하는 것은 가능하지만, 그 반대는 성립하지 않기 때문입니다.

각 훅은 하나의 일만 하도록 구현되어야 합니다. 하나의 커스텀 훅이 여러 도메인 로직을 다루거나, 도메인 로직과 관련 없는 기능을 함께 다루는 것은 지양해야 합니다.

이때 common 훅에서 도메인만 포함된 훅이 feature 훅이 됩니다.

커스텀 훅 구현하기

절차

1. 커스텀 훅의 목적과 기능 정의

2. 추상화 레벨에 맞추어 구현 계획 세우기

도메인 로직이 포함된 훅이라면 feature 훅으로 구현합니다. 이후 해당 커스텀 훅에서 도메인을 제외하고 추상화가 가능한 부분을 common훅으로 구현합니다.

common훅으로 구현한 훅을 사용하여 feature 훅을 리팩토링 합니다.

3. 구현하기

주의사항

• 각 커스텀 훅은 하나의 일만 하도록 구현해야합니다. 하나의 커스텀 훅이 여러 도메인 로직을 다루거나, 도메인 로직과 관련 없는 기능을 함께 다루는 것은 지양해야 합니다.
• feature 훅 내에서는 feature 훅을 부르면 안됩니다. feature 훅은 common 훅만 부를 수 있습니다.
• 각 커스텀 훅은 자신의 폴더를 가져야 합니다. src/hooks 폴더 내에 훅 파일이 직접 위치하지 않도록 합니다.
• 훅 폴더 내에 index.tsx 파일이 반드시 존재해야 하며, 이 파일에서 훅의 메인을 구현해야합니다.
• 훅과 관련된 모든 파일(스타일, 유틸, 서브 훅, 훅 등)은 반드시 해당 훅 폴더 내에 위치해야 합니다.
• 훅 폴더 내에서만 사용되는 파일들은 외부에서 임포트되지 않도록 주의합니다.
• 각 훅, 서브 훅, 유틸 함수 등에서만 사용되는 타입들은 해당 파일에 정의합니다.
  • 만약 다른 훅에서도 사용되는 타입이라면 공통 타입 파일로 분리합니다.

index.tsx

• 커스텀 훅의 메인 구현 파일
• 커스텀 훅의 props 타입 정의
• 커스텀 훅 내부에서 사용되는 서브 훅, 유틸 함수 임포트
• 커스텀 훅 로직 구현

기타

• 부가적으로 필요한 파일들을 위하여 추가 폴더를 생성할 수 있음

---

기억하세요: 해당 문서에 나와있는 추상화 규칙을 제외하고는 절대로 불필요한 추상화는 해서는 절대로 안됩니다.