app shell

중첩 라우팅 예제 앱 구조

중첩 라우팅은 부모 layout, outlet, child path가 화면의 정보 계층을 그대로 반영하게 만드는 작업입니다.

Tree

Route 트리

부모 route는 공통 layout을 잡고 자식 route는 세부 화면을 담당합니다.

Outlet

Outlet 배치

Outlet 위치가 sidebar, tab, detail 영역 중 어디인지 화면 구조로 먼저 정합니다.

State

State 유지

URL param과 search param이 자식 화면 전환에서도 의미를 잃지 않게 합니다.

index

상대 path와 index route가 예상 URL을 만드는지 확인합니다.

loader

부모 loader 실패가 자식 화면 전체를 막는 조건을 구분합니다.

empty

nested 404와 빈 detail 상태를 같은 fallback으로 뭉치지 않습니다.