component-colocation-pattern

name	component-colocation-pattern
description	이 문서는 react의 컴포넌트를 만들 때 지켜야하는 폴더/index.tsx 방식의 colocation 패턴을 정의합니다. 컴포넌트를 새롭게 만들어야 하거나, 기존의 컴포넌트를 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.

컴포넌트 콜로케이션 패턴 가이드라인

이 스킬은 모든 컴포넌트들 해당 프로젝트에서 지켜져야하는 컴포넌트 콜로케이션 패턴을 정의합니다.

활성화 시점

• 새로운 컴포넌트 생성
• 컴포넌트 코드를 수정하거나 리팩토링
• 컴포넌트 코드 리뷰

핵심 원칙

모든 컴포넌트는 아래의 콜로케이션 패턴을 지켜야만 합니다. 각 컴포넌트는 자신의 폴더를 가지며, 해당 폴더 내에 index.tsx 파일을 통해 익스포트됩니다.

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

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

폴더 구조 예시

src/
├── components/
│   ├── Button/
│   │   ├── index.tsx                       # Button 컴포넌트 구현
│   │   ├── components/
│   │   |   ├── ButtonIcon.tsx              # Button 컴포넌트의 서브 컴포넌트
│   │   |   ├── ButtonLoaderFallback.tsx    # Button 컴포넌트의 로딩 상태 폴백
│   │   |   ├── ButtonErrorFallback.tsx     # Button 컴포넌트의 에러 상태 폴백
│   │   ├── utils/
│   │   |   ├── index.ts                    # Button 유틸 함수 익스포트
|   |   |   └── helpers.ts                  # Button 헬퍼 함수 구현
│   │   ├── styles.ts                       # Button 스타일
│   │   └── hooks/
|   |      └── useSubmit.ts                 # Button 관련 커스텀 훅
│   └── Card/
│       └── index.tsx                       # Card 컴포넌트 구현

주의사항

• 각 컴포넌트는 자신의 폴더를 가져야 합니다. src/components 폴더 내에 컴포넌트 파일이 직접 위치하지 않도록 합니다.
• 컴포넌트 폴더 내에 index.tsx 파일이 반드시 존재해야 하며, 이 파일에서 컴포넌트의 메인을 구현해야합니다.
• 컴포넌트와 관련된 모든 파일(스타일, 유틸, 서브 컴포넌트, 훅 등)은 반드시 해당 컴포넌트 폴더 내에 위치해야 합니다.
• 컴포넌트 폴더 내에서만 사용되는 파일들은 외부에서 임포트되지 않도록 주의합니다.
• 각 컴포넌트, 서브 컴포넌트, 훅 등에서만 사용되는 타입들은 해당 파일에 정의합니다.
  • 만약 다른 컴포넌트에서도 사용되는 타입이라면 공통 타입 파일로 분리합니다.

index.tsx

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

components/

• 컴포넌트와 관련된 서브 컴포넌트들을 모아둔 폴더
• 서브 컴포넌트들은 컴포넌트 내부에서만 사용됨

utils/

• 컴포넌트와 관련된 유틸 함수들을 모아둔 폴더
• 유틸 함수들은 컴포넌트 내부에서만 사용됨

hooks/

• 컴포넌트와 관련된 커스텀 훅들을 모아둔 폴더
• 훅들은 컴포넌트 내부에서만 사용됨

기타

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