레이아웃 컴포넌트

Next.js App Router의 주요 기능 중 하나가 레이아웃(Layouts)입니다.

레이아웃은 여러 페이지가 공유하는 UI를 한 곳에서 정의하게 해 코드 중복을 줄이고 일관된 사용자 경험을 유지하도록 돕습니다.

이번 절에서는 layout.tsx 개념을 더 깊이 이해하고 실제 프로젝트 적용 방법까지 살펴보겠습니다.

아래 표는 layout.tsx가 어떤 UI를 유지하고, page.tsx와 어떻게 역할을 나누는지 먼저 정리합니다.

요소	맡는 역할	유지되는 범위	확인할 규칙
RootLayout	html/body와 전체 공통 UI	앱의 모든 페이지	src/app/layout.tsx에 html/body 포함
Nested Layout	특정 세그먼트 공통 UI	해당 폴더와 하위 폴더	children을 렌더링해야 하위 page가 보임
page.tsx	URL별 고유 화면	해당 경로에서만 교체	폴더 안에 page.tsx가 있어야 URL 접근
children	하위 layout 또는 page 자리	레이아웃 안쪽 영역	누락하면 페이지 내용이 사라짐
공유 UI	header, footer, sidebar	라우트 이동 중 계속 보임	중복 코드를 layout으로 올림

레이아웃이란 무엇인가요?

레이아웃은 특정 라우트 세그먼트와 그 하위 라우트에서 공유되는 UI를 래핑하는(감싸는) React 컴포넌트입니다.

이는 웹사이트의 헤더, 푸터, 사이드바, 내비게이션 바 등 여러 페이지에 걸쳐 동일하게 나타나는 부분들을 한 곳에서 관리할 수 있게 해줍니다.

레이아웃의 주요 특징

공유 UI: 레이아웃 내부에 정의된 UI는 해당 레이아웃이 적용되는 모든 하위 페이지에 자동으로 포함됩니다.
중첩 가능: App Router에서는 레이아웃을 중첩하여 사용할 수 있습니다. 최상위 레이아웃(Root Layout)부터 특정 라우트 세그먼트에만 적용되는 하위 레이아웃까지 계층적으로 구성할 수 있습니다.
상태 유지: 레이아웃 컴포넌트는 라우트 이동 시에도 상태(State)를 유지합니다. 즉, 레이아웃 내부의 클라이언트 컴포넌트 상태는 페이지가 변경되어도 그대로 유지됩니다. 이는 template.tsx와 가장 큰 차이점입니다.
기본적으로 서버 컴포넌트: layout.tsx 파일은 기본적으로 서버 컴포넌트로 동작합니다.

최상위 레이아웃 (`RootLayout`) 이해하기

Next.js 프로젝트를 생성하면 src/app/layout.tsx 파일이 자동으로 생성됩니다.

이 파일은 애플리케이션의 최상위 레이아웃(Root Layout) 으로, 모든 페이지에 적용되는 가장 기본적인 UI 구조를 정의합니다.

src/app/layout.tsx

// src/app/layout.tsx
import './globals.css'; // 전역 스타일 임포트

export default function RootLayout({
  children, // 필수 prop: 모든 하위 페이지 및 중첩 레이아웃이 여기에 렌더링됩니다.
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>
        <header style={{ backgroundColor: '#f0f0f0', padding: '10px' }}>
          <nav>
            <a href="/">홈</a> | <a href="/about">소개</a> | <a href="/dashboard">대시보드</a>
          </nav>
          <h1>나 혼자 Next.js</h1>
        </header>
        {children} {/* 여기에 페이지 또는 하위 레이아웃 콘텐츠가 들어옵니다 */}
        <footer style={{ backgroundColor: '#e0e0e0', padding: '10px', marginTop: '20px' }}>
          <p>&copy; 2024 나 혼자 Next.js. All rights reserved.</p>
        </footer>
      </body>
    </html>
  );
}

설명

children prop: 이 레이아웃 내부에 렌더링될 하위 콘텐츠(다른 레이아웃 또는 최종 page.tsx 파일)를 나타냅니다. 모든 레이아웃 컴포넌트는 이 children prop을 받아야 합니다.
<html>, <body> 태그: 최상위 레이아웃은 반드시 <html>과 <body> 태그를 포함해야 합니다. 이는 웹 페이지의 기본 구조를 형성합니다.
공통 UI 추가: 예시에서는 간단한 <header>와 <footer>를 추가했습니다. 이 부분은 어떤 페이지로 이동하든 항상 동일하게 표시됩니다.

실습 위 코드를 src/app/layout.tsx 파일에 붙여넣고 개발 서버(npm run dev)를 확인해 보세요.

어떤 페이지로 이동하든 상단에 헤더와 하단에 푸터가 항상 표시되는 것을 확인할 수 있습니다.

중첩 레이아웃 (`Nested Layouts`) 사용하기

아래 표는 dashboard/layout.tsx를 추가했을 때 루트 레이아웃과 중첩 레이아웃이 어떻게 쌓이는지 정리한 것입니다.

경로	적용되는 layout	children 자리에 들어가는 것	화면 결과
/	src/app/layout.tsx	src/app/page.tsx	헤더, 홈 화면, 푸터
/about	src/app/layout.tsx	src/app/about/page.tsx	헤더, 소개 화면, 푸터
/dashboard	root + dashboard/layout.tsx	dashboard/page.tsx	헤더, 사이드바, 대시보드 홈, 푸터
/dashboard/settings	root + dashboard/layout.tsx	settings/page.tsx	헤더, 사이드바, 설정 화면, 푸터
layout 위치 변경	상위 폴더로 올리면 범위 확대	더 많은 page가 영향 받음	의도하지 않은 공유 UI를 주의

특정 라우트 세그먼트에만 적용되는 별도의 레이아웃을 정의할 수도 있습니다.

이것이 바로 중첩 레이아웃입니다.

예를 들어, 대시보드 페이지와 그 하위 페이지들(dashboard/settings, dashboard/profile 등)에는 공통된 사이드바가 필요할 수 있습니다.

dashboard 폴더에 레이아웃 파일 추가: src/app/dashboard 폴더 안에 layout.tsx 파일을 생성합니다.

layout.tsx

page.tsx

layout.tsx

page.tsx

src/app/dashboard/layout.tsx 파일 내용 작성

src/app/dashboard/layout.tsx

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section style={{ display: 'flex', border: '1px solid #ccc', padding: '10px', marginTop: '10px' }}>
      <aside style={{ width: '200px', padding: '10px', backgroundColor: '#f9f9f9', borderRight: '1px solid #eee' }}>
        <h2>대시보드 메뉴</h2>
        <ul>
          <li><a href="/dashboard">대시보드 홈</a></li>
          <li><a href="/dashboard/settings">설정</a></li>
          {/* 추가 메뉴 아이템 */}
        </ul>
      </aside>
      <main style={{ flexGrow: 1, padding: '10px' }}>
        {children} {/* 대시보드 하위 페이지 콘텐츠가 여기에 렌더링됩니다 */}
      </main>
    </section>
  );
}

설명

DashboardLayout은 section 태그로 전체를 감싸고, 왼쪽에 사이드바(aside)와 오른쪽에 메인 콘텐츠 영역(main)을 가집니다.
이 레이아웃 역시 children prop을 받아, /dashboard 경로 또는 그 하위 경로의 page.tsx 콘텐츠가 main 태그 내부에 렌더링되도록 합니다.

실습 src/app/dashboard/layout.tsx 파일을 생성하고 위 코드를 붙여넣은 후, 개발 서버를 확인해 보세요.

http://localhost:3000/: 루트 레이아웃만 적용됩니다.
http://localhost:3000/about: 루트 레이아웃만 적용됩니다.
http://localhost:3000/dashboard: 루트 레이아웃 안에 DashboardLayout이 중첩되어 적용되고, 그 안에 /dashboard의 page.tsx 내용이 렌더링됩니다. 즉, 헤더-사이드바-대시보드 콘텐츠-푸터 순서로 보일 것입니다.
http://localhost:3000/dashboard/settings: 마찬가지로 루트 레이아웃 안에 DashboardLayout이 중첩되어 적용되고, 그 안에 /dashboard/settings의 page.tsx 내용이 렌더링됩니다.

라우트 이동 시 어떤 컴포넌트가 유지되고 어떤 컴포넌트가 교체되는지는 아래 흐름으로 정리할 수 있습니다.

이동	유지되는 UI	교체되는 UI	확인할 신호
/dashboard → /dashboard/settings	root layout, dashboard layout	page.tsx 영역	사이드바는 유지되고 본문만 바뀜
/about → /dashboard	root layout	about page에서 dashboard layout+page로 교체	대시보드 사이드바가 새로 나타남
/dashboard/settings → /	root layout	dashboard layout과 settings page 제거	사이드바가 사라짐
같은 layout 안 이동	layout 내부 상태	children 영역	검색어, 펼침 메뉴 같은 상태 유지 가능
template 사용 시	layout보다 자주 재생성	template 아래 영역	이동마다 초기화가 필요할 때 선택

레이아웃의 데이터 페칭

레이아웃은 기본적으로 서버 컴포넌트이므로, 서버에서 데이터를 미리 가져와 UI를 구성하는 것이 가능합니다.

이는 해당 레이아웃이 적용되는 모든 페이지에서 공통적으로 필요한 데이터를 효율적으로 로드하는 데 유용합니다.

아래 데이터 페칭 예시는 http://localhost:4000 로컬 Mock API가 실행 중인 상황을 전제로 합니다.

src/app/dashboard/layout.tsx (데이터 페칭 예시)

import { Suspense } from 'react'; // 로딩 상태 관리를 위한 Suspense 임포트

// 서버 컴포넌트에서 데이터 페칭
async function getSharedData() {
  // 실제 API 호출 로직
  const response = await fetch('http://localhost:4000/shared-dashboard-info', {
    cache: 'no-store' // 캐시 사용 여부 설정 (필요에 따라)
  });
  if (!response.ok) {
    // 에러 처리
    throw new Error('데이터를 가져오지 못했습니다.');
  }
  return response.json();
}

export default async function DashboardLayout({ // async 키워드 추가
  children,
}: {
  children: React.ReactNode;
}) {
  const sharedData = await getSharedData(); // 데이터 호출 (서버에서 실행)

  return (
    <section style={{ display: 'flex', border: '1px solid #ccc', padding: '10px', marginTop: '10px' }}>
      <aside style={{ width: '200px', padding: '10px', backgroundColor: '#f9f9f9', borderRight: '1px solid #eee' }}>
        <h2>대시보드 메뉴</h2>
        <p>공유 데이터: {sharedData.message}</p> {/* 가져온 데이터 사용 */}
        <ul>
          <li><a href="/dashboard">대시보드 홈</a></li>
          <li><a href="/dashboard/settings">설정</a></li>
        </ul>
      </aside>
      <main style={{ flexGrow: 1, padding: '10px' }}>
        {/* Suspense를 사용하여 children 로딩 중 대체 UI 표시 가능 */}
        <Suspense fallback={<div>페이지 로딩 중...</div>}>
          {children}
        </Suspense>
      </main>
    </section>
  );
}

참고: Next.js 15 이후 fetch 응답은 기본적으로 요청 사이에 캐시되지 않습니다.

다만 같은 서버 렌더링 작업 안에서 URL과 옵션이 같은 fetch는 중복 요청이 메모이제이션될 수 있습니다.

요청 사이에서도 응답을 재사용하려면 cache: 'force-cache'나 재검증 정책을 명시합니다.

레이아웃에 둘 데이터와 페이지에 둘 데이터를 구분할 때는 사용 범위와 상태 유지 여부를 함께 보는 것이 좋습니다.

데이터	두기 좋은 위치	이유	주의 신호
사용자 이름/권한	root 또는 dashboard layout	여러 하위 페이지가 공통 사용	모든 페이지가 기다리는 병목
대시보드 메뉴	dashboard/layout.tsx	대시보드 하위에서 반복	다른 섹션까지 노출되면 위치가 높음
설정 상세 값	settings/page.tsx	해당 화면에서만 필요	layout에 두면 다른 페이지도 영향
로딩 UI	loading.tsx 또는 Suspense	대기 위치를 세그먼트별로 제어	전체 화면이 과하게 멈춤
클라이언트 상태	작은 client component	이벤트와 상태가 필요한 부분만 hydrate	layout 전체를 use client로 올림

마지막으로 layout.tsx, template.tsx, page.tsx를 선택하는 기준을 한 번에 비교해 보겠습니다.

파일	언제 쓰나	유지/교체 방식	대표 실수
layout.tsx	공유 UI와 상태 유지가 필요할 때	같은 세그먼트 이동 중 유지	children 누락
template.tsx	이동마다 새 인스턴스가 필요할 때	라우트 전환 때 재생성	layout과 같은 용도로 남용
page.tsx	URL별 고유 화면이 필요할 때	해당 URL에서만 렌더	공통 UI를 page마다 복사
loading.tsx	데이터 대기 UI가 필요할 때	세그먼트 단위 대체 UI	너무 넓은 구간에 둬 전체가 가려짐
error.tsx	세그먼트 오류 복구가 필요할 때	가까운 오류 경계에서 처리	use client 누락

레이아웃 컴포넌트를 사용하면 애플리케이션의 UI 구조를 체계적으로 관리하고, 코드의 재사용성을 높이며, 일관된 사용자 경험을 제공하는 데 큰 도움이 됩니다.

중첩 레이아웃을 통해 복잡한 UI도 효율적으로 구성할 수 있습니다.

이제 레이아웃 컴포넌트의 중요성과 활용법에 대해 충분히 이해하셨으리라 생각합니다.

아래 표는 레이아웃 컴포넌트를 프로젝트에 넣을 때 결정해야 할 파일 위치와 런타임 경계를 정리합니다.

결정할 것	권장 위치	좋은 신호	나쁜 신호
전체 공통 UI	src/app/layout.tsx	모든 페이지에 필요한 header/footer	특정 섹션 메뉴까지 root에 둠
섹션 공통 UI	src/app/dashboard/layout.tsx	대시보드 안에서만 sidebar 유지	about에도 대시보드 메뉴가 보임
상호작용 메뉴	layout 안의 작은 client component	상태 필요한 부분만 use client	layout.tsx 전체를 client로 전환
페이지 고유 데이터	각 page.tsx	화면별 fetch 범위가 작음	layout fetch가 모든 하위 화면을 지연
오류/로딩 처리	가장 가까운 세그먼트 파일	문제 영역만 대체 UI로 감쌈	앱 전체가 오류 화면으로 덮임

마지막으로 RootLayout과 중첩 레이아웃이 어떤 UI를 유지하고 어디서 데이터를 가져오는지 비교합니다.

비교 항목	RootLayout	Nested Layout	판단 기준
적용 범위	앱 전체	특정 폴더와 하위 라우트	모든 페이지에 필요한가
필수 태그	html, body 필요	일반 컴포넌트 구조	root layout만 문서 껍데기 담당
공유 UI	전역 header, font, provider	섹션 nav, sidebar, tab	섹션 밖에서도 보여야 하는가
데이터	전역 설정, 세션 기본값	섹션 공통 데이터	하위 페이지가 모두 쓰는가
위험	너무 많은 책임 집중	범위를 잘못 잡아 UI 누수	필요한 최소 폴더에 둔다

레이아웃이란 무엇인가요?

최상위 레이아웃 (RootLayout) 이해하기

중첩 레이아웃 (Nested Layouts) 사용하기

레이아웃의 데이터 페칭

이 페이지의 목차

최상위 레이아웃 (`RootLayout`) 이해하기

중첩 레이아웃 (`Nested Layouts`) 사용하기