컴포넌트 파일명 index.tsx와 index.styles.ts 파일명 이름 문제

컴포넌트 폴더 하에 index.tsx랑 index.styles.ts을 두었는데 이는 좋은 파일 이름이 아니라는 피드백을 받았다.

난 이렇게 살아왔는데

역시 실무자의 피드백은 소중하다.

안 좋은 이유
1. 명확하지 않은 파일명으로 인한 혼동
만약 여러 개의 컴포넌트를 index.tsx로 두면 컴포넌트와 스타일 파일을 import할 때 이름 충돌이 발생할 수도 있다. 나는 그 동안 이런 문제가 한 번도 발생하지 않아서 이게 무슨 말인지 이해도 안 간다.
gpt의 힘을 빌려서 이해해보았다.

다른 사람은 index.tsx가 {컴포넌트명}라는 컴포넌트를 대표한다는 것을 바로 알기 어려울 수 있다.

여러 컴포넌트를 포함하는 폴더에서 사용할 경우, 어떤 컴포넌트를 지칭하는지 명확하지 않을 수 있어 혼동을 야기할 수 있다. 따라서 파일명에 컴포넌트 이름을 명시하는 것이 좋다.

예를 들어 아래와 같은 경우

/components
   /user
      /userInput
           /index.tsx
      /userList
           /index.tsx

이런 구조에서 /userInput/index.tsx와 /userList/index.tsx는 각각 다른 컴포넌트를 담당하는 파일이다. 그런데 이렇게 index.tsx로 파일명을 정하면, 나중에 파일명만 보아서는 이 파일들이 무엇을 하는지 즉시 이해할 수 없다.

나는 맨날 아래와 같이 만들어서 파일명 말고 컴포넌트 폴더명을 확인하는 것이 습관이 되어서 뭐가 불편한지 이해가 안 갔는데 이젠 알겠다.

components/
  UserInfoArea/
    index.tsx
    index.styles.ts
  UserInput/
    index.tsx
    index.styles.ts

gpt도 이렇게 하면 혼동 가능성이 거의 없다고는 한다. 그래도 현직자분이 이런 경우는 본 적이 없다고 하셔서 일반적인 컨벤션을 따르기로 했다. 나도 처음에 이렇게 만들고 나서 이게 맞나 생각한 적이 있기 때문..

2. 확장성이 떨어짐
   복잡한 컴포넌트가 많아질수록 모든 컴포넌트 파일을 index.tsx와 index.styles.ts로 묶어두면 폴더가 많아지고 복잡해지며 확장성이 떨어질 수 있다.
   ex. 각 폴더에 다양한 파일(테스트 파일, 유틸리티 파일 등)이 추가되면, index.tsx와 index.styles.ts 외에도 다른 파일들이 함께 존재할 때 그 파일들이 어떤 역할을 하는지 명확히 구분하기 어려울 수 있다.