React 파일명 규칙

파일명이 문득 camelCase와 kebab-case가 혼재되어 나 보려고 정리.

이유 정리
• PascalCase (예: MyButton.tsx)
• React 컴포넌트를 즉시 식별 가능
• JSX에서 와 이름이 1:1 매칭
• Create-React-App, Next.js 기본 예제도 이 스타일 채택
• kebab-case (예: date-utils.ts, user-service.ts)
• 파일 시스템에서 가독성 높고 오타 가능성 ↓
• URL·CSS 클래스·스크립트 태그 등과 시각적으로 어울림
• npm 패키지 이름 관례(react-router, date-fns)와 통일감
• camelCase (예: myComponent.tsx)
• JS 변수명 룰과 유사하나, 파일명으로는 덜 직관적
• 대문자로 시작하지 않으니 컴포넌트로 오해하기 어려움

권장 조합
1. 컴포넌트 → PascalCase (UserCard.tsx, LoginForm.tsx)
2. 커스텀 훅 → camelCase 앞에 use- 접두어 + kebab (use-fetch.ts)
3. 유틸 / 서비스 / 타입 → kebab-case (api-client.ts, date-format.ts)

즉 컴포넌트는 대문자로 시작, 커스텀 훅은 use-, 나머지는 소문자-

페이지는 컴포넌트로 볼수도 있고, url과 일치시키고 싶다면 소문자- 를 쓰는것도 방법인데 나는 일단 기존처럼 컴포넌트로 보고 접근할 예정.