요청 URL은 세그먼트, layout, page, 서버/클라이언트 경계를 거쳐 렌더 트리로 조립된다
App Router의 구조를 이해하려면 파일이 URL을 만드는 과정과 컴포넌트가 서버 또는 브라우저에서 실행되는 경계를 같이 봐야 한다.
| 단계 | 읽는 대상 | 결정되는 것 | 확인할 파일 |
|---|---|---|---|
| 1. URL 매칭 | /dashboard/settings | dashboard, settings 세그먼트 | src/app/dashboard/settings |
| 2. layout 누적 | 상위 layout.tsx | 공통 UI가 바깥에서 안쪽으로 중첩 | root layout, segment layout |
| 3. page 선택 | 최종 page.tsx | 해당 URL의 고유 화면 | settings/page.tsx |
| 4. 상태 파일 적용 | loading/error/not-found | 대기, 오류, 404 UI | 같은 세그먼트의 예약 파일 |
| 5. 경계 분리 | use client 여부 | 서버에서 남을 코드와 브라우저로 갈 코드 | 상호작용 컴포넌트 |