Layout Component

layout.tsx 공유 UI 경계

레이아웃의 본질, 중첩 작동 방식, 생성 실습, 데이터 공유 가능성을 책임 범위로 정리합니다.

Root Layout

전체 앱 구조

html, body, 전역 Provider처럼 모든 페이지에 필요한 요소를 둡니다.

Nested Layout

섹션 구조

블로그, 대시보드 등 특정 구간에서만 유지할 UI를 배치합니다.

데이터 경계

공유 데이터

사용자 정보나 메뉴 데이터처럼 하위 화면이 함께 쓰는 값을 준비합니다.

배치 기준

layout 후보 판단

여러 page에 같은 코드를 복사하기 전에 URL 계층상 같은 부모를 공유하는지 확인하면 layout 위치가 보입니다.

실습 흐름

상위 찾기공유 UI가 필요한 가장 좁은 폴더를 고릅니다.
children 배치공통 UI 사이에 하위 화면이 들어갈 위치를 정합니다.
전환 확인하위 페이지 이동 시 공통 UI가 유지되는지 확인합니다.