📌 개요
Next.js 13부터 도입된 App Router에서는 기존 Page Router와 달리
애플리케이션의 UI를 페이지가 아닌 Layout 중심으로 설계한다.
이 글에서는 다음 내용을 정리한다.
layout.tsxtemplate.tsx- Nested Layout 구조
- 공통 UI 관리 방식
- 실제 렌더링 흐름과 동작 원리
1. layout.tsx
📌 개념
layout.tsx는 공통 UI를 정의하는 파일이다.
해당 경로 이하의 모든 페이지에서 공통으로 유지되는 UI를 담당한다.
예를 들어:
- Header
- Footer
- Sidebar
- Navigation
같은 요소들을 포함할 수 있다.
📌 기본 구조
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body>
<header>Header</header>
{children}
<footer>Footer</footer>
</body>
</html>
);
}📌 특징
- 페이지 이동 시 다시 렌더링되지 않음
- 상태(state)가 유지됨
- 공통 레이아웃을 효율적으로 관리 가능
📌 왜 다시 렌더링되지 않을까?
Next.js App Router에서는 layout이 React Tree에서 유지되기 때문이다.
즉,
- layout은 유지되고
- 내부의 page만 교체된다
👉 이 구조 덕분에:
- state 유지 가능
- 불필요한 렌더링 감소
- 성능 최적화
2. template.tsx
📌 개념
template.tsx는 layout.tsx와 구조는 비슷하지만
페이지 이동 시마다 새로 렌더링되는 레이아웃이다.
📌 왜 template가 필요할까?
layout은 유지되기 때문에 다음과 같은 문제가 있다:
- 애니메이션이 실행되지 않음
- 초기화 로직이 동작하지 않음
👉 그래서 등장한 것이 template.tsx
📌 차이점 (layout vs template)
| 구분 | layout.tsx | template.tsx |
|---|---|---|
| 렌더링 | 유지됨 | 매번 새로 렌더링 |
| 상태 유지 | O | X |
| 사용 목적 | 공통 UI | 애니메이션, 초기화 |
📌 사용 예시
- 페이지 전환 애니메이션
- 진입 시마다 초기화가 필요한 UI
- 특정 페이지 진입 효과
3. children 구조와 렌더링 흐름 (핵심)
App Router는 children을 통해 계층 구조를 구성한다.
📌 구조
layout
→ template
→ page또는 Nested 구조에서는:
Root Layout
└ Dashboard Layout
└ Template
└ Page📌 핵심 동작
- layout은 children을 감싼다
- 하위 layout도 children으로 계속 중첩된다
- 결국 트리 구조로 UI가 구성됨
4. Nested Layout 구조
📌 개념
Next.js는 폴더 구조를 기반으로
레이아웃을 계층적으로 중첩(Nested)해서 적용할 수 있다.
📌 예시 구조
app/
├─ layout.tsx
├─ page.tsx
├─ dashboard/
│ ├─ layout.tsx
│ └─ page.tsx📌 동작 방식
app/layout.tsx→ 전체 공통 레이아웃dashboard/layout.tsx→ dashboard 전용 레이아웃
👉 /dashboard 접근 시:
Root Layout
└ Dashboard Layout
└ Page📌 장점
- 기능별 UI 분리
- 유지보수 용이
- 복잡한 UI 구조 관리 가능
5. 실제 렌더링 흐름 (중요)
📌 페이지 이동 시 동작
예: /home → /dashboard
1. 기존 layout 유지
2. 새로운 page만 교체
3. template이 있다면 새로 렌더링📌 정리
- layout → 유지됨
- template → 새로 렌더링됨
- page → 교체됨
👉 이 구조가 Next.js 성능의 핵심
6. 공통 UI 관리 방식
📌 기존 방식 (Page Router)
_app.tsx에서 공통 UI 관리- 모든 페이지에 동일 적용
📌 App Router 방식
layout.tsx를 활용하여
경로별로 공통 UI를 분리 가능
📌 예시
전체 공통 UI
// app/layout.tsx
<header>Global Header</header>특정 영역 전용 UI
// app/dashboard/layout.tsx
<aside>Dashboard Sidebar</aside>📌 핵심 포인트
- UI를 "페이지"가 아닌 "구조" 기준으로 설계
- 필요한 곳에만 레이아웃 적용
- 불필요한 렌더링 감소
7. layout vs template 언제 사용할까?
📌 layout.tsx
- Header / Footer
- Sidebar
- 상태 유지가 필요한 UI
- 공통 구조
📌 template.tsx
- 페이지 전환 애니메이션
- 초기화가 필요한 UI
- 매번 새로 렌더링이 필요한 경우
📌 최종 정리
layout.tsx→ 공통 UI, 상태 유지, 재사용template.tsx→ 매번 새로 렌더링, 초기화 목적- Nested Layout → 구조 기반 UI 설계
- children → UI 트리 구성 핵심
👉 App Router의 핵심은
페이지가 아니라 Layout 중심으로 구조를 설계하는 것
⏰ Good things take time