레이아웃 컴포넌트 사용하기

레이아웃 컴포넌트 적용 흐름

레이아웃은 특정 라우트 세그먼트와 그 하위 라우트에서 공유되는 UI를 래핑하는(감싸는) React 컴포넌트입니다.

Next.js 프로젝트를 생성하면 src/app/layout.tsx 파일이 자동으로 생성됩니다.

특정 라우트 세그먼트에만 적용되는 별도의 레이아웃을 정의할 수도 있습니다.

레이아웃은 기본적으로 서버 컴포넌트이므로, 서버에서 데이터를 미리 가져와 UI를 구성합니다.

레이아웃은 라우트 세그먼트와 하위 페이지를 감싸는 공통 UI 경계로, 페이지 전환 중에도 필요한 상태를 유지합니다.

해당 세그먼트의 하위 페이지는 같은 layout.tsx를 거치므로 내비게이션, 사이드바, 탭 상태를 반복 구현하지 않아도 됩니다.

중첩 레이아웃은 상위 레이아웃을 유지한 채 하위 세그먼트에 필요한 UI만 추가합니다.