Layouts

레이아웃은 여러 경로 간에 공유되는 UI이다. 탐색 시 레이아웃은 상태를 유지하고 상호 작용 가능하며 다시 렌더링되지 않으며, 레이아웃을 중첩 할 수도 있다.

레이아웃은 layout.js 파일에서 React 컴포넌트를 기본으로 내보내어 정의할 수 있다. 컴포넌트는 렌더링 중에 자식 레이아웃(있는 경우) 또는 페이지로 채워질 children prop을 허용해야 한다. 예를 들어, 레이아웃은 /dashboard 및 /dashboard/settings 페이지와 공유될 것이다.

Untitled

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}

Root Layout (Required)

루트 레이아웃은 app 디렉토리의 최상위 수준에서 정의되며 모든 경로에 적용된다. 이 레이아웃은 필수이며 html 및 body 태그를 포함해야 한다. 이를 통해 서버에서 반환된 초기 HTML을 수정할 수 있다.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  )
}

Nesting Layouts

기본적으로 폴더 계층구조에 있는 레이아웃은 중첩(nested)되어 있다. 이는 레이아웃이 자식 레이아웃을 children prop을 통해 감싸는 것을 의미한다. 특정 경로 세그먼트(폴더) 내에 layout.js를 추가하여 레이아웃을 중첩할 수 있다.

Untitled

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

위의 두 레이아웃을 결합한다면, 루트 레이아웃(app/layout.js)은 대시보드 레이아웃(app/dashboard/layout.js)을 감싸고, 대시보드 레이아웃은 app/dashboard/* 내의 경로 세그먼트를 감싸게 될 것이다.

이 두 레이아웃은 다음과 같이 중첩된다.

Untitled