App Router

App Router 화면 조립

파일 컨벤션, 서버 컴포넌트 기본값, 클라이언트 컴포넌트 전환 지점을 한 화면에 정리합니다.

layout.tsx

공유 구조

children을 받아 하위 페이지를 감싸며 내비게이션과 공통 UI를 유지합니다.

page.tsx

라우트 화면

폴더 경로의 최종 화면을 만들고 서버에서 데이터를 가져올 수 있습니다.

Convention

파일명이 역할을 정함

예약 파일 이름을 맞추면 라우팅과 로딩, 에러 처리가 자동으로 연결됩니다.

기본 원리

URL은 폴더가 만들고 화면은 예약 파일이 만든다

App Router에서는 app 아래 경로를 따라가며 layout이 누적되고 page가 해당 URL의 본문을 담당합니다.

읽는 순서

폴더브라우저 URL과 대응하는 app 하위 폴더를 먼저 찾습니다.
레이아웃상위 layout이 어떤 공통 UI를 감싸는지 확인합니다.
페이지page.tsx에서 실제 화면과 데이터 가져오기를 살핍니다.