App Router에서 파일 기반 routing은 어떻게 동작하나요?

Question

Accepted Answer

App Router에서는 **`app/` 내부의 폴더 구조가 라우트를 정의**합니다. 작성해야 할 라우터 설정이 없습니다. 각 폴더는 URL 세그먼트이고, 그 안의 특수 파일들이 해당 세그먼트가 무엇을 렌더링할지 정의합니다. ## 폴더 = URL 세그먼트 ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (동적 세그먼트) shop/(sale)/page.tsx → /shop (라우트 그룹 — 괄호는 URL에 더해지지 않음) ``` ## 특수 파일들 각 폴더는 예약된 파일명을 가질 수 있으며, 각각 특정 역할을 합니다: ```text page.tsx → 라우트의 UI (세그먼트를 라우팅 가능하게 하려면 필수) layout.tsx → 하위 라우트 전반에 유지되는 공유 래퍼 loading.tsx → 로딩 UI (페이지를 로 자동 감쌈) error.tsx → 세그먼트의 에러 바운더리 not-found.tsx→ 404 UI route.ts → API 엔드포인트 (페이지 대신) ``` ## 동적 세그먼트 ```tsx // app/blog/[slug]/page.tsx → /blog/hello, /blog/anything 과 매칭됨 export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` 대괄호는 `params`를 통해 페이지로 전달되는 동적 파라미터를 만듭니다. 변형: `[...slug]`(catch-all), `[[...slug]]`(선택적 catch-all). ## 라우트 그룹 및 구조화 ```text app/(marketing)/about/page.tsx → /about ((marketing) 폴더는 URL에서 무시됨) ``` 괄호는 URL에 영향을 주지 않으면서 파일을 구조화하거나 서로 다른 레이아웃을 적용하기 위한 **라우트 그룹**을 만듭니다. ## 왜 중요한가 파일 기반 routing은 파일 트리만 보고도 URL 구조를 분명하게 만들어 줍니다. 동기화를 유지해야 할 중앙 라우트 설정이 없습니다. 특수 파일명(`page`, `layout`, `loading`, `error`, `route`)과 대괄호 컨벤션(`[param]`, `[...catchAll]`, `(group)`)을 아는 것은 모든 App Router 앱을 만드는 데 필요한 핵심 어휘입니다.