
## Layout이란


Layout은 여러 페이지에서 공유되는 UI를 말한다. Next.js App Router에서 Layout은 다음과 같은 특징을 가진다.

- 페이지 전환 시 상태를 유지한다
- 재렌더링되지 않는다
- 인터랙션을 유지한다

## 기본 사용법


특정 폴더 안에 `layout.tsx` 파일을 만들면 해당 폴더와 하위 폴더의 모든 페이지가 이 Layout을 공유한다.


```typescript
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      <nav>네비게이션 바</nav>
      <main>{children}</main>
    </section>
  )
}
```


위 코드에서 `children` prop으로 해당 Layout 안에 렌더링될 페이지나 하위 Layout을 받는다. Layout 컴포넌트는 반드시 `children`을 받아서 렌더링해야 한다.


## Root Layout


`app` 디렉토리의 최상위에는 반드시 Root Layout이 있어야 한다. 이 Layout은 애플리케이션 전체에 적용되며, 다른 Layout과 달리 특별한 요구사항이 있다.


```typescript
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  )
}
```


Root Layout은 `<html>`과 `<body>` 태그를 반드시 포함해야 한다. 이는 서버 사이드 렌더링 시 완전한 HTML 문서를 생성하기 위함이다.


## Layout 중첩


폴더 구조에 따라 Layout은 자동으로 중첩된다.


```plain text
app/
├── layout.tsx          # Root Layout
└── dashboard/
    ├── layout.tsx      # Dashboard Layout
    └── settings/
        ├── layout.tsx  # Settings Layout
        └── page.tsx    # Settings Page
```


위와 같은 구조에서 `/dashboard/settings` 경로에 접근하면 다음 순서로 중첩된다.

1. Root Layout이 Dashboard Layout을 감싼다
2. Dashboard Layout이 Settings Layout을 감싼다
3. Settings Layout이 Settings Page를 감싼다

각 Layout은 자신의 `children`으로 다음 단계의 Layout 또는 Page를 받는다.


## Layout의 동작 방식


Layout은 페이지 전환 시 재렌더링되지 않는다. 예를 들어 `/dashboard/analytics`에서 `/dashboard/settings`로 이동할 때, 두 페이지가 같은 Dashboard Layout을 공유한다면 Dashboard Layout은 그대로 유지되고 내부의 페이지 컴포넌트만 교체된다.


이로 인해 다음과 같은 이점이 있다.

- Layout 내부의 상태가 유지된다
- 불필요한 재렌더링을 방지해 성능이 향상된다
- Layout 내부의 인터랙티브한 요소가 초기화되지 않는다

## Route Group으로 Layout 구성하기


Route Group은 폴더 이름을 괄호 `(folderName)`로 감싸서 만든다. 이렇게 만든 폴더는 URL 경로에 포함되지 않고, 단순히 라우트를 구조화하는 용도로만 사용된다.


### Route Group의 활용


Route Group을 사용하면 다음과 같은 작업을 할 수 있다.

- 팀, 기능, 관심사별로 라우트를 논리적으로 그룹화한다
- 동일한 라우트 세그먼트 레벨에서 여러 개의 Root Layout을 정의한다
- 특정 라우트에만 선택적으로 Layout을 적용한다

### 사용 예시


```plain text
app/
├── (marketing)/
│   ├── layout.tsx      # 마케팅 전용 Layout
│   ├── about/
│   │   └── page.tsx    # URL: /about
│   └── blog/
│       └── page.tsx    # URL: /blog
└── (shop)/
    ├── layout.tsx      # 쇼핑 전용 Layout
    ├── products/
    │   └── page.tsx    # URL: /products
    └── cart/
        └── page.tsx    # URL: /cart
```


위 구조에서 `(marketing)`과 `(shop)`은 URL에 포함되지 않는다. `/about` 페이지는 마케팅 Layout을 사용하고, `/products` 페이지는 쇼핑 Layout을 사용한다.


### 여러 Root Layout 만들기


Route Group을 사용하면 하나의 앱 안에서 완전히 다른 Root Layout을 여러 개 만들 수 있다.


```plain text
app/
├── (site)/
│   ├── layout.tsx      # 일반 사이트용 Root Layout
│   └── page.tsx        # URL: /
└── (admin)/
    ├── layout.tsx      # 관리자용 Root Layout
    └── page.tsx        # URL: /admin (route group 내부에서는 /page로 처리)
```


다만 서로 다른 Root Layout 사이를 이동할 때는 전체 페이지가 다시 로드된다. 같은 Root Layout 내에서 이동할 때처럼 부분 렌더링이 일어나지 않는다.


### 주의사항


공식 문서에서 언급하는 주의사항이다.

- 서로 다른 Route Group에서 같은 URL 경로가 생기지 않도록 해야 한다. 예를 들어 `(shop)/products/page.tsx`와 `(marketing)/products/page.tsx`는 둘 다 `/products` URL을 만들기 때문에 충돌이 발생한다.
- 여러 Root Layout을 사용할 때, 홈 페이지 `/`는 반드시 하나의 Route Group 안에 정의되어야 한다.

## 참고 자료

- [Next.js 공식 문서 - Layouts and Templates](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates)
- [Next.js 공식 문서 - Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups)


App Router Layout 설정하기