layout.tsx는 공유 UI를 감싸고 page.tsx는 URL별 고유 화면을 채운다
레이아웃은 페이지 위아래에 반복되는 구조를 한 곳에서 유지하고, children 자리에 현재 페이지를 끼워 넣는다.
| 요소 | 맡는 역할 | 유지되는 범위 | 확인할 규칙 |
|---|---|---|---|
| RootLayout | html/body와 전체 공통 UI | 앱의 모든 페이지 | src/app/layout.tsx에 html/body 포함 |
| Nested Layout | 특정 세그먼트 공통 UI | 해당 폴더와 하위 폴더 | children을 렌더링해야 하위 page가 보임 |
| page.tsx | URL별 고유 화면 | 해당 경로에서만 교체 | 폴더 안에 page.tsx가 있어야 URL 접근 |
| children | 하위 layout 또는 page 자리 | 레이아웃 안쪽 영역 | 누락하면 페이지 내용이 사라짐 |
| 공유 UI | header, footer, sidebar | 라우트 이동 중 계속 보임 | 중복 코드를 layout으로 올림 |