Next.jsMedium#234
동적 라우트와 catch-all 라우트의 차이를 설명해주세요.
#Next.js#DynamicRoute#Routing#AppRouter
답변 포인트
단일 세그먼트와 다중 세그먼트 파라미터를 기준으로 정의, 장점, 한계, 예시를 함께 설명해보세요.
정답 및 해설
빠른 요약
[id]는 하나의 경로 세그먼트를 받고, [...slug]는 여러 세그먼트를 배열로 받으며, [[...slug]]는 세그먼트가 없는 경우도 매칭합니다. 실무 예시: Next.js에서는 같은 페이지라도 데이터 최신성, 사용자별 여부, 상호작용 필요성에 따라 렌더링 전략이 달라집니다.
동적 라우트는 URL의 일부를 파라미터로 받는 라우트이고, catch-all 라우트는 여러 경로 조각을 배열로 받는 라우트입니다.
동적 라우트
Text
app/products/[id]/page.tsx
/products/123 -> params.id = '123'상품 상세, 사용자 프로필, 게시글 상세처럼 한 세그먼트가 변수일 때 사용합니다.
Catch-all 라우트
Text
app/docs/[...slug]/page.tsx
/docs/a/b/c -> params.slug = ['a', 'b', 'c']문서 사이트, CMS, 계층형 카테고리처럼 깊이가 가변적인 URL에 적합합니다.
Optional catch-all
Text
app/docs/[[...slug]]/page.tsx
/docs -> params.slug = undefined
/docs/a/b -> params.slug = ['a', 'b']루트 경로와 하위 경로를 같은 컴포넌트에서 처리할 수 있습니다.
실무 주의점
- params는 문자열이므로 숫자 ID 검증이 필요합니다.
- catch-all은 너무 넓게 매칭되어 의도치 않은 URL을 삼킬 수 있습니다.
- 정적 생성과 함께 쓸 때는
generateStaticParams로 가능한 경로를 제공할 수 있습니다.
면접 답변 포인트
[id]는 한 세그먼트, [...slug]는 하나 이상의 세그먼트 배열, [[...slug]]는 없어도 되는 배열이라고 설명하면 명확합니다.