공통 UI는 오래 유지될수록 위에, 좁은 책임일수록 아래에 둔다
레이아웃 계층을 설계할 때는 UI가 유지되어야 하는 범위와 바뀌어야 하는 범위를 먼저 나눠야 한다.
| 둘 위치 | 적합한 내용 | 예시 | 잘못 두면 |
|---|---|---|---|
| RootLayout | html/body, 전역 폰트, 최상위 provider | app/layout.tsx | 전역이 아닌 UI까지 모두 감쌈 |
| Section Layout | 대시보드 사이드바, 마케팅 헤더 | app/dashboard/layout.tsx | 섹션 이동 때 유지되어야 할 UI가 사라짐 |
| Nested Layout | 프로필 전용 메뉴, 설정 탭 | app/dashboard/profile/layout.tsx | 너무 위에 두면 다른 페이지까지 오염 |
| Page | 해당 URL의 본문 | profile/page.tsx | 공통 UI를 page마다 반복 |
| Client Provider | 상호작용 상태, 테마 토글 | 작은 client wrapper | layout 전체가 클라이언트 번들로 커짐 |