React 컴포넌트 이름을 대충 지으면 생기는 일

처음에는 이름이 별로 중요하지 않다고 생각했다. Button이면 버튼이고, Card면 카드지. 그런데 프로젝트가 커질수록 파일을 찾고 역할을 파악하는 데 시간이 쌓인다.

범용 이름의 문제

components/Button.tsx가 있다고 하자. 나중에 이 버튼이 두 가지 역할을 하게 된다. 제출 버튼과 삭제 버튼. 구분하려고 props로 variant를 추가한다. 그러다 디자인이 달라진 버튼이 하나 더 생기면 PrimaryButton을 만든다. 그러면 기존 Button과 PrimaryButton이 공존하게 되고, 어느 걸 써야 하는지 매번 코드를 열어봐야 한다.

처음부터 용도에 맞는 이름을 붙였다면 이런 혼선이 없었을 것이다.

# 나쁜 예
components/
  Button.tsx
  Card.tsx
  Modal.tsx

# 더 나은 예
components/
  ui/
    IconButton.tsx
    SubmitButton.tsx
  blog/
    PostCard.tsx
    AuthorCard.tsx
  layout/
    ConfirmModal.tsx
    ImageModal.tsx

이름이 역할을 설명해야 한다

좋은 컴포넌트 이름은 파일을 열기 전에 무슨 역할인지 짐작할 수 있어야 한다. PostCard는 포스트를 카드 형태로 보여주는 컴포넌트다. Card는 뭘 보여주는지 모른다.

이름을 지을 때 나는 이 두 질문을 기준으로 쓴다.

1. 이 컴포넌트가 무엇을 보여주는가? (도메인)
2. 어떤 형태로 보여주는가? (UI 패턴)

PostCard = Post(도메인) + Card(UI 패턴). CommentThread = Comment(도메인) + Thread(UI 패턴).

IDE 검색에서도 차이가 난다

Button으로 검색하면 수십 개의 파일이 나온다. SubmitButton으로 검색하면 필요한 파일이 바로 나온다. 범용 이름은 검색 노이즈를 만든다.

# 이런 검색 결과가 나오면 피곤하다
grep -r 'Button' src/ --include='*.tsx' | wc -l
# → 143

리팩터링 시 이름 변경이 어렵다는 핑계

"나중에 이름 바꾸면 되지"라고 생각하기 쉬운데, 이미 여러 파일에서 import해서 쓰고 있으면 손이 많이 간다. IDE의 rename 기능이 있지만, 파일명과 컴포넌트 이름을 같이 바꿔야 하고 테스트 파일도 수정해야 한다. 처음에 좋은 이름을 쓰는 게 훨씬 저렴하다.

새 컴포넌트를 만들 때 이름이 바로 안 떠오르면 그 자체가 역할이 불명확하다는 신호다. 이름이 어려우면 컴포넌트 분리가 잘못된 경우가 많다.