Layouts에 대해

Odyssey·2025년 1월 7일
0

Next.js_study

목록 보기
7/58
post-thumbnail

2025.1.7 수요일의 공부기록

Next.js에서 자동 생성되는 layout.tsx 파일은 특정 요소를 페이지 간에 재사용할 수 있도록 설계된 구조다. 예를 들어, 네비게이션 바와 같은 공통 컴포넌트를 모든 페이지에서 사용하고자 할 때 layout.tsx를 활용할 수 있다.


layout.tsx의 존재 이유

layout.tsx는 페이지 간 공통된 레이아웃을 관리하기 위한 파일이다.
공통 요소(예: 네비게이션 바, 푸터 등)를 반복적으로 각 페이지에 추가할 필요 없이 한 곳에서 관리할 수 있다. 이를 통해 코드 재사용성과 유지보수성을 높일 수 있다.


렌더링 순서

Next.js는 레이아웃 → 페이지 파일 순서로 렌더링을 진행한다.

렌더링 과정

  1. layout.tsx에 정의된 디폴트 컴포넌트가 먼저 렌더링된다.
  2. 현재 URL을 확인한 후, 해당 경로에 맞는 페이지 컴포넌트가 렌더링된다.

예제: 공통 네비게이션 바 추가

layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav style={{ padding: '10px', backgroundColor: '#eee' }}>
          <a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a>
        </nav>
        {children}
      </body>
    </html>
  );
}

page.tsx (예: /about):

export default function AboutPage() {
  return <h1>About Us</h1>;
}

결과:

  1. layout.tsx에 정의된 네비게이션 바가 먼저 렌더링된다.
  2. about/page.tsx의 콘텐츠(About Us)가 layout.tsx에서 {children} 자리에 삽입된다.

특정 페이지를 위한 layout.tsx

layout.tsx는 특정 페이지 또는 페이지 그룹에만 적용할 수 있다.
레이아웃을 적용할 페이지가 포함된 폴더에 layout.tsx 파일을 생성하면 된다.
해당 폴더 아래의 모든 페이지에도 레이아웃이 적용된다.

구조 예시

app/
├── layout.tsx         // 전체 레이아웃 (기본 레이아웃)
├── page.tsx           // 홈 페이지
├── about/
│   ├── layout.tsx     // About 전용 레이아웃
│   ├── page.tsx       // About 페이지
│   └── team/
│       ├── page.tsx   // Team 페이지

동작

  1. /about 경로 → about/layout.tsx가 적용된 후, about/page.tsx가 렌더링된다.
  2. /about/team 경로 → about/layout.tsx가 적용된 후, about/team/page.tsx가 렌더링된다.

레이아웃 중첩

Next.js에서는 레이아웃이 여러 개일 경우, 중첩되는 방식으로 작동한다.
레이아웃 파일이 서로 대체되지 않고, 부모 레이아웃 위에 자식 레이아웃이 추가되는 구조다.

중첩 구조 예시

app/
├── layout.tsx         // 기본 레이아웃 (Global Layout)
├── about/
│   ├── layout.tsx     // About 전용 레이아웃
│   ├── page.tsx       // About 페이지

렌더링 순서

  1. /about 경로 접근 시, app/layout.tsx(Global Layout)이 먼저 렌더링된다.
  2. 이후 about/layout.tsx(About Layout)이 렌더링된다.
  3. 마지막으로 about/page.tsx의 콘텐츠가 렌더링된다.

코드 예시

app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>Global Header</header>
        {children}
        <footer>Global Footer</footer>
      </body>
    </html>
  );
}

app/about/layout.tsx:

export default function AboutLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <aside>About Sidebar</aside>
      <main>{children}</main>
    </div>
  );
}

app/about/page.tsx:

export default function AboutPage() {
  return <h1>About Us</h1>;
}

결과

  1. Global Header (app/layout.tsx)
  2. About Sidebar (about/layout.tsx)
  3. About Us (about/page.tsx)
  4. Global Footer (app/layout.tsx)

0개의 댓글