TypeScript/React 네이밍 규칙
파일명
| 항목 |
규칙 |
예시 |
| 컴포넌트 |
PascalCase |
UserCard.tsx, LoginForm.tsx |
| 페이지 |
PascalCase |
Dashboard.tsx, UserList.tsx |
| 훅 |
camelCase + use 접두사 |
useAuth.ts, useFetch.ts |
| 서비스 |
camelCase |
userService.ts, authApi.ts |
| 유틸리티 |
camelCase |
formatDate.ts, validation.ts |
| 타입 정의 |
camelCase |
user.types.ts, api.types.ts |
| 상수 |
camelCase |
routes.ts, constants.ts |
| 스타일 |
컴포넌트명 + .module |
UserCard.module.css |
| 테스트 |
대상 + .test |
UserCard.test.tsx |
변수/함수
| 항목 |
규칙 |
예시 |
| 변수 |
camelCase |
userName, isLoading |
| 함수 |
camelCase |
getUserList, formatDate |
| 상수 |
UPPER_SNAKE_CASE |
MAX_RETRY, API_BASE_URL |
| boolean 변수 |
is/has/can/should 접두사 |
isActive, hasPermission |
| 이벤트 핸들러 |
handle 접두사 |
handleClick, handleSubmit |
| 이벤트 Props |
on 접두사 |
onClick, onSubmit |
타입/인터페이스
| 항목 |
규칙 |
예시 |
| interface |
PascalCase |
UserProfile, ApiResponse |
| Props |
컴포넌트명 + Props |
UserCardProps, ButtonProps |
| 응답 타입 |
도메인 + Response |
UserResponse, LoginResponse |
| 요청 타입 |
동작 + Request |
CreateUserRequest |
| Enum |
PascalCase |
UserStatus, HttpMethod |
| Enum 값 |
UPPER_SNAKE_CASE |
ACTIVE, PENDING |
| Generic |
단일 대문자 |
T, K, V |
디렉토리
- 모두 kebab-case 또는 camelCase (프로젝트 통일)
- 예:
src/components/common/, src/hooks/, src/services/
컴포넌트 구조 예시
src/components/user-card/
├── UserCard.tsx # 컴포넌트
├── UserCard.module.css # 스타일
├── UserCard.test.tsx # 테스트
└── index.ts # re-export
9cc8f6b66a