파일 계약

layout·template·page 유지 범위

같은 App Router 폴더 안에서도 공유 UI는 layout에, 이동마다 초기화할 UI는 template에, URL별 콘텐츠는 page에 둡니다.

컴포넌트 위치 판단

컴포넌트 위치 판단

layout.tsx

상태 유지

template.tsx

전환 초기화

page.tsx

URL 화면

주요 역할

헤더, 사이드바, 공통 fetch 결과 공유

페이지 이동마다 effect와 state 재시작

현재 route의 실제 콘텐츠 렌더링

데이터 위치

여러 하위 페이지가 함께 쓰는 데이터

전환 애니메이션이나 진입 로그 기준

목록, 상세, 설정처럼 화면 전용 데이터

root

앱 공통 껍데기

app/layout.tsx는 html, body와 전역 UI의 기준점입니다.

segment

대시보드 공유 UI

dashboard/layout.tsx는 하위 page가 바뀌어도 남습니다.

leaf

현재 화면 콘텐츠

settings/page.tsx는 설정 URL에서만 필요한 UI를 담당합니다.