icon안동민 개발노트

레이아웃 컴포넌트 사용하기

 Next.js의 레이아웃 시스템은 여러 페이지에서 공유되는 UI를 효율적으로 관리할 수 있게 해줍니다.

 이 절에서는 layout.js 파일의 역할과 레이아웃 컴포넌트를 생성하고 사용하는 방법에 대해 자세히 알아보겠습니다.

layout.js 파일의 역할

 layout.js 파일은 여러 페이지에서 공통으로 사용되는 UI 요소를 정의합니다.

 이 파일은 다음과 같은 특징을 가집니다.

  1. 기본적으로 서버 컴포넌트입니다.
  2. children prop을 받아 하위 컴포넌트를 렌더링합니다.
  3. 여러 레벨로 중첩될 수 있습니다.
  4. 레이아웃은 라우트가 변경되어도 리렌더링되지 않고 상태를 유지합니다.

루트 레이아웃

 루트 레이아웃은 애플리케이션의 모든 페이지에 적용되는 최상위 레이아웃입니다.

 app/layout.js 파일에 정의되며, HTML과 body 태그를 포함해야 합니다.

app/layout.js
import './globals.css'
 
export const metadata = {
  title: 'My Next.js App',
  description: 'Created with Next.js',
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>{/* 네비게이션 메뉴 */}</nav>
        </header>
        <main>{children}</main>
        <footer>{/* 푸터 내용 */}</footer>
      </body>
    </html>
  )
}

 이 루트 레이아웃은 모든 페이지에 헤더와 푸터를 제공하며, children prop을 통해 각 페이지의 고유한 콘텐츠를 렌더링합니다.

중첩 레이아웃

 중첩 레이아웃을 사용하면 특정 라우트 그룹에 대해 추가적인 UI 구조를 정의할 수 있습니다.

 예를 들어, 대시보드 섹션에 대한 레이아웃을 만들어 보겠습니다.

app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <aside>{/* 대시보드 사이드바 */}</aside>
      <div className="dashboard-content">
        {children}
      </div>
    </div>
  )
}

 이 레이아웃은 /dashboard 경로 아래의 모든 페이지에 적용됩니다.

 예를 들어, /dashboard/analytics, /dashboard/settings 등의 페이지에 이 레이아웃이 사용됩니다.

레이아웃 컴포넌트 생성 및 사용

 레이아웃 컴포넌트를 생성할 때 주의할 점

  1. layout.js 파일은 해당 디렉토리와 그 하위 디렉토리의 모든 라우트에 적용됩니다.
  2. 레이아웃은 중첩될 수 있으며, 자식 레이아웃은 부모 레이아웃 내에 렌더링됩니다.
  3. layout.js에서 metadata 객체를 내보내 SEO 관련 정보를 설정할 수 있습니다.

 예를 들어, 블로그 섹션에 대한 레이아웃을 만들어 보겠습니다.

app/blog/layout.js
import Link from 'next/link'
 
export const metadata = {
  title: 'Our Blog',
  description: 'Read our latest articles',
}
 
export default function BlogLayout({ children }) {
  return (
    <section>
      <nav>
        <Link href="/blog">All Posts</Link>
        <Link href="/blog/categories">Categories</Link>
      </nav>
      <article>{children}</article>
    </section>
  )
}

 이 레이아웃은 블로그 관련 페이지에 특화된 네비게이션을 제공하며, 모든 블로그 페이지에 적용됩니다.

7장 서버,클라이언트 컴포넌트와의 연결

 레이아웃 컴포넌트는 기본적으로 서버 컴포넌트입니다.

 7장에서는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점과 각각의 사용 사례에 대해 더 자세히 다룹니다.

 레이아웃에서 클라이언트 사이드 인터랙션이 필요한 경우, 클라이언트 컴포넌트를 레이아웃 내에 포함시키는 방법을 학습하게 될 것입니다. 이를 통해 서버 렌더링의 이점을 유지하면서도 동적인 UI를 구현할 수 있습니다.

실습 : 여러 레벨의 중첩 레이아웃 구현하기

 다음 요구사항을 만족하는 중첩 레이아웃 구조를 구현해보세요.

 1. 루트 레이아웃 app/layout.js

  • 전체 애플리케이션에 적용되는 헤더와 푸터 포함
  • 글로벌 네비게이션 메뉴 구현

 2. 대시보드 레이아웃 app/dashboard/layout.js

  • 사이드바 네비게이션 포함
  • 대시보드 관련 페이지에만 적용

 3. 블로그 레이아웃 app/blog/layout.js

  • 블로그 관련 네비게이션 포함
  • 최근 게시물 목록 사이드바 구현

 4. 블로그 포스트 레이아웃 (app/blog/[slug]/layout.js)

  • 포스트 제목과 메타 정보 표시
  • 댓글 섹션 포함

 각 레이아웃에 대해

  1. 적절한 위치에 layout.js 파일을 생성합니다.
  2. 레이아웃 컴포넌트를 구현합니다.
  3. 필요한 경우 메타데이터를 설정합니다.
  4. 자식 컴포넌트(children)를 적절히 배치합니다.

 이 실습을 통해 여러 레벨의 중첩 레이아웃을 구현하고, 각 레이아웃이 어떻게 조합되어 전체 페이지 구조를 형성하는지 이해할 수 있습니다.

 이는 복잡한 웹 애플리케이션의 UI 구조를 효과적으로 관리하는 데 필요한 핵심 스킬을 개발하는 데 도움이 될 것입니다.

이전으로다음으로