| 앱 전용 컴포넌트 |
LoginForm.tsx, Dashboard.page.tsx |
PascalCase |
| 재사용 UI 컴포넌트 |
button.tsx, input.tsx |
소문자 (kebab/camel/pure lowercase) |
| 유틸 함수, 상태 관리 등 |
auth.store.ts, format-date.ts |
소문자 (도구이므로 컴포넌트 아님) |
React Feature Folder에서의 접미사 네이밍 종류
1. 화면/페이지 관련
| *.page.tsx |
라우팅 단위 페이지 컴포넌트 |
| *.layout.tsx |
페이지 레이아웃 컴포넌트 |
| *.template.tsx |
여러 페이지에서 공유하는 중간 컴포넌트 |
| *.route.tsx |
라우트 정의 파일 (React Router) |
2. UI 컴포넌트
| *.component.tsx |
단순하고 재사용 가능한 UI 컴포넌트 |
| *.presenter.tsx |
상태 없는 프레젠테이션 컴포넌트 |
| *.container.tsx |
상태를 가진 컨테이너 컴포넌트 |
| *.widget.tsx |
여러 컴포넌트를 조합한 UI 단위 |
| *.modal.tsx |
모달 컴포넌트 |
| *.dialog.tsx |
다이얼로그 컴포넌트 |
| *.form.tsx |
입력 폼(Form) 구성 요소 |
3. 로직/상태 관리
| *.hook.ts |
커스텀 훅 (예: useXXX) |
| *.store.ts |
전역 상태 관리 (Zustand, Redux 등) |
| *.context.ts |
React Context 정의 |
| *.query.ts |
React Query 사용 로직 |
| *.mutation.ts |
React Query mutation 관련 로직 |
| *.model.ts |
데이터 모델/타입 정의 |
4. 비즈니스 로직 / API 통신
| *.service.ts |
API 호출 또는 클라이언트 비즈니스 로직 |
| *.api.ts |
HTTP 요청 정의 (axios, fetch) 등 |
| *.controller.ts |
컴포넌트/서비스 사이 조정자 역할 |
5. 기타 유틸/설정 파일
| *.util.ts |
유틸리티 함수 모음 (format 등) |
| *.constant.ts |
상수 정의 파일 |
| *.types.ts |
TypeScript 타입 정의 |
| *.schema.ts |
Zod/Joi 등의 스키마 검증 로직 |
| *.mock.ts |
테스트용 데이터/모킹 로직 |
| *.test.ts(x) |
테스트 파일 |
| *.config.ts |
설정 파일 (예: Form 설정, 테마 등) |
디렉토리 구조 (Feature 기준)
src/
└── features/
└── note/
├── page/
│ └── NoteList.page.tsx
├── component/
│ ├── NoteCard.component.tsx
│ └── NoteFilter.form.tsx
├── hook/
│ ├── useNoteList.hook.ts
│ └── useNoteForm.hook.ts
├── store/
│ └── note.store.ts
├── api/
│ └── note.api.ts
├── service/
│ └── note.service.ts
├── types/
│ └── note.types.ts
├── schema/
│ └── note.schema.ts
├── constant/
│ └── note.constant.ts
└── test/
└── note.test.tsx
네이밍 규칙 팁
- 역할 기준으로 명확하게 이름을 붙이되, 디렉토리 구조와도 일관성 유지
- 너무 세분화하면 복잡해지므로, 팀/프로젝트 규모에 맞게 조절
- component/ 내에서는 접미사 생략하고도 명확하면 생략해도 무방 (NoteCard.tsx)
