Next.js - layout.tsx, children

기본 디렉토리 구조

app/
├── layout.tsx               # 전체 앱 공통 레이아웃
├── page.tsx                 # 루트 페이지 (/)
└── dashboard/
    ├── layout.tsx           # /dashboard 하위 전용 레이아웃
    ├── page.tsx             # /dashboard 페이지
    └── settings/
        └── page.tsx         # /dashboard/settings 페이지

 

 

layout.tsx

layout.tsx는 특정 경로 이하의 모든 하위 페이지에 적용되는 공통 레이아웃 구성 파일입니다.
예를 들어 app/dashboard/layout.tsx는 /dashboard, /dashboard/settings, /dashboard/profile 등 하위 모든 경로에 공통 UI(예: 사이드바, 헤더)를 제공합니다.

 

예시 코드

// app/dashboard/layout.tsx

import SideNav from "@/app/ui/dashboard/sidenav";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">
        {children}
      </div>
    </div>
  );
}

• SideNav: 왼쪽 사이드바로 고정되는 영역입니다.
• children: 현재 경로에 해당하는 페이지 콘텐츠가 여기에 들어갑니다.
• layout.tsx는 틀(프레임)이고, children은 그 안에 들어가는 내용입니다.

---

children

React에서 children은 컴포넌트 내부에 렌더링될 자식 요소를 의미합니다.

예시

// layout.tsx 내부
<div>
  <h1>공통 레이아웃</h1>
  {children} // 여기에 각 페이지의 콘텐츠가 들어감
</div>

 

// page.tsx
export default function Page() {
  return <p>대시보드 메인 콘텐츠입니다</p>;
}

 

렌더링 결과

공통 레이아웃
대시보드 메인 콘텐츠입니다

 

 

---

 

 

하위 경로로 들어가면?

예를 들어 /dashboard/settings로 이동하면

1. Next.js는 먼저 app/dashboard/layout.tsx를 렌더링합니다.
2. 그 안의 {children} 자리에 app/dashboard/settings/page.tsx의 내용이 들어갑니다.
3. SideNav는 그대로 유지되고, 오른쪽 내용만 바뀝니다.

 

실제 동작 흐름

// layout.tsx
<SideNav />
{children} // <- 여기 자리에 settings/page.tsx의 내용이 들어옴

 

// settings/page.tsx
export default function SettingsPage() {
  return <p>설정 페이지입니다</p>;
}

 

결과 화면

[SideNav 고정됨]    설정 페이지입니다

 

 

 

---

 

중첩 레이아웃이 필요한 경우는?

/dashboard/settings만 다른 레이아웃을 쓰고 싶다면 app/dashboard/settings/layout.tsx를 새로 만들면 됩니다.
Next.js는 해당 경로의 layout.tsx를 우선적으로 적용합니다.

 

 

---

 

 

정리

항목	설명
layout.tsx	공통 레이아웃 정의, 반복되는 UI를 재사용 가능
children	해당 경로의 page.tsx 내용이 렌더링되는 자리
장점	레이아웃 유지 + 페이지 전환만 수행 = 빠르고 일관된 UX
중첩 가능	/dashboard, /dashboard/settings 등 레이아웃 구분 가능