레이아웃 상태 유지 체험

Next.js의 layout은 네비게이션 시 리렌더링되지 않으며 상태를 유지합니다. 아래 데모에서 카운터를 올린 뒤 페이지를 전환해보세요 — 카운터 값이 유지됩니다.

핵심 개념

layout은 여러 페이지 간 공유되는 UI
페이지 전환 시 layout은 리렌더링되지 않음 → 상태 유지
children prop으로 현재 페이지를 렌더링
root layout은 html + body 태그 필수

파일 구조

creating-layout/
├── page.tsx        ← 현재 페이지 (개념 설명)
├── layout.tsx      ← 카운터 포함 공유 레이아웃
├── home/
│   └── page.tsx    → /home
├── about/
│   └── page.tsx    → /about
└── blog/
    └── page.tsx    → /blog

핵심 코드

// app/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
      </body>
    </html>
  )
}

데모 시작 →