layout.tsx는 여러 page가 공유하는 UI와 실행 경계를 맡는다
레이아웃은 공통 UI를 복사하지 않게 하고, 하위 route가 들어올 children 자리를 고정해 페이지 이동 중 유지될 부분을 결정한다.
| 확인 축 | layout.tsx의 책임 | children의 의미 | 주의할 점 |
|---|---|---|---|
| 공통 UI | 헤더, 사이드바, 푸터를 한곳에 둠 | 하위 page가 들어갈 자리 | page마다 반복 UI를 복사하지 않기 |
| 중첩 범위 | 해당 폴더와 모든 하위 route에 적용 | 다음 layout 또는 page가 들어옴 | 어느 세그먼트부터 공유할지 결정 |
| 상태 유지 | 이동해도 유지될 UI를 감쌈 | 바뀌는 부분만 children으로 교체 | 유지되면 안 되는 상태를 너무 위에 두지 않기 |
| 서버 기본값 | 기본적으로 서버 컴포넌트 | 서버에서 만든 구조 안에 하위 UI 삽입 | 이벤트가 필요하면 client provider 분리 |
| 성능 | 변하지 않는 구조를 재사용 | 페이지별 콘텐츠만 교체 | 데이터와 캐시 범위를 넓히기 전 검토 |