App Router
중첩 레이아웃 렌더링 트리
상위 layout은 하위 segment를 감싸며 유지되고, page는 가장 안쪽에서 실제 화면 내용을 채운다.
라우트 segment가 화면을 감싸는 순서
layout tree세그먼트 레이아웃
특정 폴더 아래 페이지를 다시 감싸는 지역 UI를 만든다.
페이지
현재 URL에 대응하는 실제 콘텐츠가 children 위치에 들어간다.
상태 유지
공유 레이아웃은 이동 중에도 재마운트 범위가 작아진다.
app/layout
→segment/layout
→children
→page.tsx
→화면 출력
중첩 레이아웃은 파일 트리 그대로 읽으면 된다. 어떤 UI가 계속 남아야 하는지에 따라 layout 위치를 정한다.