핵심 흐름
최상위 레이아웃 (RootLayout) 이해하기
Next.js 프로젝트를 생성하면 src/app/layout.tsx 파일이 자동으로 생성됩니다.
중첩 레이아웃 (Nested Layouts) 사용하기
특정 라우트 세그먼트에만 적용되는 별도의 레이아웃을 정의할 수도 있습니다.
레이아웃의 데이터 페칭
레이아웃은 기본적으로 서버 컴포넌트이므로, 서버에서 데이터를 미리 가져와 UI를 구성하는 것이 가능합니다.
Next.js App Router의 강력한 기능 중 하나가 레이아웃(Layouts)입니다. 레이아웃은 여러 페이지가 공유하는 UI를 한 곳에서 정의하게 해 코드 중복을 줄이고 일관된 사용자 경험을 유지하도록 돕습니다.
레이아웃(Layouts)와 레이아웃의 주요 특징를 중심으로 레이아웃 컴포넌트 사용하기의 판단 흐름을 읽습니다.
레이아웃은 특정 라우트 세그먼트와 그 하위 라우트에서 공유되는 UI를 래핑하는(감싸는) React 컴포넌트입니다.
Next.js 프로젝트를 생성하면 src/app/layout.tsx 파일이 자동으로 생성됩니다.
특정 라우트 세그먼트에만 적용되는 별도의 레이아웃을 정의할 수도 있습니다.
레이아웃은 기본적으로 서버 컴포넌트이므로, 서버에서 데이터를 미리 가져와 UI를 구성하는 것이 가능합니다.