Next.js

레이아웃 컴포넌트 생성 및 중첩

Next.js App Router에서 레이아웃 컴포넌트는 단순히 UI를 공유하는 것을 넘어, 애플리케이션의 구조와 성능을 최적화하는 데 핵심적인 역할을 합니다. 3장에서 레이아웃의 기본 개념과 최상위 레이아웃, 중첩 레이아웃 사용법을 간략히 살펴보았습니다.

레이아웃 컴포넌트와 레이아웃의 핵심 역할를 중심으로 레이아웃 컴포넌트 생성 및 중첩의 판단 흐름을 읽습니다.

핵심 흐름

1

레이아웃 컴포넌트의 본질과 역할

레이아웃 컴포넌트는 app 디렉터리 내의 특정 라우트 세그먼트 폴더 안에 위치한 layout.tsx 파일입니다.

2

레이아웃 중첩의 작동 방식

App Router에서 레이아웃은 폴더 구조에 따라 자동으로 중첩됩니다.

3

레이아웃 컴포넌트 생성 실습

이전에 만들었던 대시보드 예제를 바탕으로, 특정 하위 페이지에만 적용되는 중첩 레이아웃을 추가해 보겠습니다.

4

레이아웃에서 데이터 공유

레이아웃은 서버 컴포넌트이므로, 해당 레이아웃이 적용되는 모든 하위 컴포넌트(다른 레이아웃, 페이지 컴포넌트)에서 공통적으로 필요한 데이터를 레이아웃에서 미리 페칭할 수 있습니다.