App Router flow

layout은 경로가 바뀌어도 공통 UI와 상태를 붙잡는다

RootLayout에서 segment layout, page children까지 감싼 뒤 같은 세그먼트 안의 이동에서는 layout 인스턴스가 유지된다.

RootLayout → segment layout → page children

children slot
1

RootLayout

앱 전체를 감싸며 <html>, <body>, 전역 provider를 둔다.

app/layout.tsx <html> <body> {children} </body> </html>
상태 유지 모든 route
2

Segment layout

dashboard 같은 라우트 구간에서 사이드바, 탭, 공통 데이터를 공유한다.

app/dashboard/layout.tsx <DashboardShell> {children} </DashboardShell>
구간 내 유지 shared UI
3

Page children

가장 안쪽 page.tsx가 children으로 들어오며 실제 화면 내용만 바뀐다.

app/dashboard/settings/page.tsx <SettingsPage />
이동 때 교체 leaf route

route 이동 시 layout 상태 유지

same segment

/dashboard

  • RootLayout 유지
  • DashboardLayout 유지
  • Dashboard page 렌더링

/dashboard/settings

  • RootLayout 그대로
  • 사이드바 상태 그대로
  • Settings page로 교체

layout.tsx와 template.tsx의 차이

state boundary

layout.tsx persist

같은 segment 안에서 다시 마운트되지 않으므로 입력값, 열림 상태, client state를 유지하기 좋다.

template.tsx remount

이동할 때 새 인스턴스를 만들어 transition, effect 재실행, 상태 초기화가 필요한 화면에 맞다.