개요
Next.js에서는 App Router를 도입하면서 폴더가 곧 라우트(route)가 되는 구조를 채택했습니다. 이와 함께 “컴포넌트 Colocation” 방식—한 기능(또는 페이지)과 관련된 코드(UI, 로직, 스타일, 타입, 테스트 등)을 한 폴더에 모아두는 설계—이 각광받고 있습니다. 하지만 기존의 “1파일 1컴포넌트” 원칙을 엄격히 지킬 때와 충돌이 발생하기도 합니다. 이 글에서는 Colocation이 무엇인지, 장·단점을 짚어보고, 실제 프로젝트에 어떻게 적용하면 좋을지 제안해보겠습니다.
컴포넌트 Colocation이란?
- 한 기능(화면)이나 컴포넌트 단위로 폴더를 만들고, 그 안에 관련된 모든 리소스를 함께 두는 구조입니다.
app/ └─ dashboard/ ├ page.tsx ← 화면 UI + 데이터 페칭 ├ layout.tsx ← 공통 레이아웃 └ Loading.tsx ← 로딩 상태 컴포넌트 components/ └─ Button/ ← 재사용 가능한 버튼 ├ index.tsx ├ styles.ts └ Button.test.tsx
Colocation의 장단점
장점
- 기능 경계가 분명
- 한 폴더에 페이지·컴포넌트 관련 리소스가 모두 모여 있어, 퍼포먼스 로직·스타일·타입 등을 빠르게 파악할 수 있습니다.
- 유지보수·리팩토링 용이
- 기능 단위로 작업하다가 리팩토링 시 연관 파일을 한 곳에서 수정·검토할 수 있습니다.
- 협업 효율
- 새로운 팀원이 와도, 어느 폴더가 어떤 역할을 하는지 바로 이해할 수 있습니다.
- 불필요한 코드 노출 방지
- 컴포넌트 전용 타입·스타일이 전역에 퍼지지 않고 해당 폴더 안에 격리됩니다.
단점
- 폴더·파일 과다 생성
- 작은 컴포넌트까지 별도 폴더로 분리하면, 프로젝트 루트나 라우트 디렉터리에서 파일 트리가 복잡해집니다.
- 라우트와 컴포넌트 폴더 충돌
- Next.js App Router에서는 app/ 폴더 자체가 라우트를 정의하므로, “컴포넌트만 위한 폴더”를 추가하기 애매해지는 경우가 많습니다.
- 맥락 전환 비용
- 단순 로직을 가진 컴포넌트를 보기 위해 폴더를 덜컥 열어야 하는 번거로움이 있습니다.