Next.jsMedium#227
App Router의 layout, page, template 파일은 각각 어떤 역할을 하나요?
#Next.js#AppRouter#layout#page
답변 포인트
라우트 계층과 상태 유지 여부를 기준으로 정의, 장점, 한계, 예시를 함께 설명해보세요.
정답 및 해설
빠른 요약
page는 라우트 화면, layout은 하위 라우트 공유 UI, template은 전환마다 새 인스턴스가 필요한 공유 UI에 사용됩니다. 상태 유지 여부가 중요한 차이입니다.
App Router에서 layout, page, template은 라우트 세그먼트의 화면 구조를 정의하는 파일입니다. 셋 다 UI를 반환하지만 재사용 범위와 remount 동작이 다릅니다.
page
page.tsx는 해당 URL에서 실제로 렌더링되는 고유한 페이지입니다. 라우트가 접근 가능하려면 세그먼트 어딘가에 page가 있어야 합니다.
TSX
// app/products/[id]/page.tsx
export default async function ProductPage({ params }) {
const product = await getProduct(params.id);
return <ProductDetail product={product} />;
}layout
layout.tsx는 여러 page를 감싸는 공유 UI입니다. 내비게이션, 사이드바, 공통 데이터 로딩에 적합하며, 하위 라우트 이동 시 가능한 한 상태를 유지합니다.
TSX
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return <><Sidebar /> <main>{children}</main></>;
}template
template.tsx도 children을 감싸지만 라우트 전환 시 새 인스턴스로 remount됩니다. 페이지 전환마다 animation을 다시 실행하거나 client component state를 초기화하고 싶을 때 사용합니다.
선택 기준
- URL의 본문:
page - 여러 하위 화면이 공유하고 유지할 UI:
layout - 전환마다 새로 마운트되어야 하는 wrapper:
template
면접 답변 포인트
layout은 공유 UI와 상태 보존, page는 실제 라우트 엔드포인트, template은 layout과 비슷하지만 navigation 시 remount된다고 설명하면 됩니다.