App Router 상태 경계

layout은 껍질을 유지하고 page만 갈아 끼운다

라우트 세그먼트 트리를 보면 어떤 컴포넌트가 그대로 남고 어떤 화면이 새로 들어오는지 이동 전후 차이가 선명해진다.

세그먼트 트리

children slot
app/layout.tsx

RootLayout

<html>, <body>, 전역 provider를 한 번 감싼다.

dashboard/layout.tsx

DashboardLayout

사이드바, 탭, 필터 상태처럼 구간 전체가 공유하는 UI를 둔다.

page.tsx

DashboardPage 또는 SettingsPage

URL leaf가 바뀌면 children 자리에 들어오는 화면만 바뀐다.

template.tsx

일부러 다시 마운트할 때

전환 애니메이션, 상태 초기화, effect 재실행이 필요할 때 쓴다.

/dashboard에서 /dashboard/settings로 이동

같은 부모 세그먼트

이동 전: /dashboard

rootRootLayout 유지
segmentDashboardLayout 유지
leafDashboardPage 표시

사이드바 열림, 검색어, 클라이언트 상태가 layout 안에 있으면 보존된다.

이동 후: /dashboard/settings

root같은 인스턴스
segment사이드바 상태 유지
leafSettingsPage로 교체

새 page는 들어오지만 상위 layout의 fetch 결과와 UI 상태는 그대로 이어진다.

layout.tsx

공유 껍질과 상태의 자리

같은 세그먼트 안에서는 다시 만들지 않으므로 탐색 중 유지할 UI에 맞다.

page.tsx

URL이 가리키는 실제 화면

children 슬롯에 꽂히는 leaf라서 이동하면 이 부분이 가장 자주 교체된다.

template.tsx

초기화가 필요한 화면 경계

layout처럼 감싸지만 이동마다 새 인스턴스를 만들어 상태를 다시 시작한다.