layout.tsx는 공유 UI와 children, 데이터 경계를 나누는 파일이다
레이아웃 중첩을 이해하려면 각 계층이 무엇을 유지하고 무엇을 children으로 넘기는지 함께 봐야 한다.
| 책임 | layout.tsx | page.tsx | 설계 기준 |
|---|---|---|---|
| 공유 UI | 공통 껍데기 렌더 | 고유 본문 렌더 | 여러 경로가 공유하면 layout |
| children | 하위 layout/page 삽입 | children을 받지 않음 | 교체되는 영역을 명확히 둠 |
| 데이터 | 공통 데이터 fetch 가능 | 화면별 데이터 fetch | 데이터 사용 범위에 맞춤 |
| 상태 유지 | 이동 중 유지될 UI 감쌈 | 페이지 전환 때 교체 | 유지되면 좋은가를 먼저 판단 |
| 클라이언트 기능 | 작은 client wrapper 포함 | 상호작용 컴포넌트 배치 | use client 범위를 최소화 |