레이아웃은 여러 페이지를 감싸고 네비게이션 간에도 유지되는 공유 UI입니다. 하위 라우트 간을 이동해도 다시 렌더링되거나 상태를 잃지 않습니다. layout.tsx 파일로 정의합니다.
루트 레이아웃 (필수)
tsx
() {
(
);
}
모든 App Router 앱은 루트 레이아웃을 가져야 합니다. 옛 _app.tsx/_document.tsx를 대체합니다.
레이아웃은 폴더 구조를 따라 중첩되므로, 각 섹션이 자체적인 영구 래퍼를 추가할 수 있습니다:
app/layout.tsx → 전체를 감쌈 (헤더/푸터)
app/dashboard/layout.tsx → 모든 /dashboard/* 페이지를 감쌈 (사이드바 추가)
app/dashboard/settings/page.tsx → 두 레이아웃 안에서 렌더링됨
// app/dashboard/layout.tsx — dashboard 라우트만 감쌈
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* /dashboard 내에서 이동해도 마운트 유지 */}
<main>{children}</main>
</div>
);
}
/dashboard/settings에서 /dashboard/billing으로 이동하면 dashboard 레이아웃(과 그 <Sidebar>)은 마운트된 채로 유지됩니다. 상태(스크롤 위치, 열린 메뉴, 폼 입력)가 보존되고 페이지 콘텐츠만 교체됩니다. 이는 전체 셸을 다시 렌더링하는 것보다 효율적이고 더 매끄러운 UX를 제공합니다.
// template.tsx — layout과 비슷하지만 네비게이션마다 다시 마운트됨 (매번 새 상태)
네비게이션마다 래퍼를 리셋하고 싶은 드문 경우에는 layout.tsx 대신 template.tsx를 사용하세요.
레이아웃은 App Router가 라우트 트리의 어느 수준에서든 공유되고 유지되는 UI(헤더, 사이드바, 네비게이션)를 모델링하는 방법입니다.
네비게이션 간 유지 — 상태 보존과 셸의 재렌더링 회피 — 는 App Router의 핵심 장점이며, 중첩 레이아웃은 각 섹션이 자체 구조를 깔끔하게 구성하도록 해 줍니다.
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기