[refactor] Lv.3 React 프로젝트에서 명명 규칙 통일하기 (feat. PascalCase)
우리 프로젝트 초반에는 기능 구현이 먼저였다.
빠르게 화면을 띄우고, 버튼을 눌렀을 때 동작하게 하는 게 우선이었고
파일 이름? 그건 나중에 정리하면 되지 뭐.
그렇게 미뤘던 이름들이 쌓이고 쌓여 어느 순간 팀원들끼리 이런 대화가 오가기 시작했다.
"그 로그인 관련 파일 이름 뭐였지?"
"그거 Loginform이었나? 아니면 loginForm...? 대문자였나 소문자였나..."
우리는 그제야 깨달았다.
제각각 짓던 파일명 때문에 개발 생산성이 떨어지고 있었단 걸.
혼란스러웠던 파일명들
초기 로그인/회원가입 관련 컴포넌트 파일명은 이런 식이었다.
LoginForm.js
Signup.js
Mypage.js
Newpassword.js
PasswordFind.js
modules.css
- Mypage.js: 단어 구분 없음
- Newpassword.js: 무슨 단어인지 한눈에 안 들어옴
- modules.css: 이게 무슨 모듈인지 알 수 없음
파일마다 대소문자도 제각각, 단어 구분 방식도 들쭉날쭉. JSX에서 자동완성조차 제대로 되지 않아 import 한 줄 쓰는 것도 스트레스였다.
😵 이런 네이밍이 왜 문제일까?
- JSX 컴포넌트와 파일명이 매칭되지 않아 자동완성과 검색이 꼬임
- 파일 구조 파악이 어렵고, 리팩토링 중 관련 파일 추적에 시간 낭비
- 팀원마다 네이밍 스타일이 달라 Git 충돌 자주 발생
- 결과적으로 협업 생산성이 급격히 저하됨
📚 그래서 우리는 명명 규칙부터 정리했다
리팩토링에 앞서 먼저, JavaScript와 React 환경에서 자주 쓰이는 파일명 명명 규칙(Naming Convention)을 정리해봤다.
스타일 예시 특징
| PascalCase | LoginForm.js | React 컴포넌트 파일에 가장 일반적 |
| camelCase | loginForm.js | 변수나 함수에 적합. 파일엔 비추천 |
| kebab-case | login-form.js | Vue, URL 등에서 자주 쓰이지만 React엔 비적합 |
| snake_case | login_form.js | 백엔드에서 사용, JS에선 거의 안 씀 |
✅ React에서 왜 PascalCase를 쓰는가?
React 공식 문서에 명확히 나와 있다:
"React component names must start with a capital letter."
— React Docs: JSX in Depth
JSX에서 <LoginForm />처럼 컴포넌트를 대문자로 시작하기 때문에
컴포넌트 파일명도 PascalCase로 작성하는 것이 일관성을 위해 자연스럽다.
그리고 Airbnb, Google, Facebook 등 주요 스타일 가이드도 모두 PascalCase를 추천한다.
우리는 이렇게 리팩토링했다
기존 파일들
codingzonemain.js
CodingZoneMyattendance.js
codingzoneRegist.js
CodingzoneAttendanceManager.js
CodingZoneattendanceassistant.js
수정 파일들
CodingZoneMain.js
CodingZoneMyAttendance.js
CodingZoneRegister.js
CodingZoneAttendanceManager.js
CodingZoneAttendanceAssistant.js
- 모든 파일을 PascalCase로 통일
- Regist → Register: 영어 표현도 자연스럽게 수정
- 단어 경계를 구분해 가독성과 명확성 확보
💬 리팩토링을 마치고 나서
사실 파일 이름 바꾸는 건 귀찮다.
하지만 효과는 정말 컸다.
- 자동완성 정확도 향상
- 컴포넌트 구조 파악 쉬움
- PR 리뷰 속도 빨라짐
- 팀원 간 충돌 줄고, 협업 만족도 상승
그리고 무엇보다도
"우리 프로젝트는 일관된 규칙을 따른다.”는 신뢰가 생겼다.
✅ 우리가 지킨 네이밍 룰 정리
항목 규칙 예시
| 컴포넌트 파일 | PascalCase | LoginForm.js, CodingZoneMain.js |
| 훅 파일 | camelCase | useAuth.js, useBlogForm.js |
| 모듈 CSS | [컴포넌트명].module.css | Modal.module.css, LoginForm.module.css |
