Next.js 공식문서를 번역하여 기록해둔 내용입니다.
Layout
레이아웃은 여러 경로 사이에서 공유되는 UI이다. 레이아웃은 내비게이션 시 상태를 보존하고 상호작용이 가능하며, 다시 렌더링되지 않는다. 또한, 레이아웃은 중첩될 수도 있다.
레이아웃을 정의하려면 layout.js 파일에서 React 컴포넌트를 기본으로 내보내면 된다. 이 컴포넌트는 렌더링 시 자식 레이아웃(존재하는 경우) 또는 페이지로 채워질 children prop을 받아야 한다.
예를 들어, 레이아웃은 /dashboard 및 /dashboard/settings 페이지와 공유된다.
app/
└── dashboard/
├── layout.js
├── page.js
└── settings/
└── page.js이렇게 하면 /dashboard와 /dashboard/settings 페이지가 이 레이아웃을 공유하게 된다.
Root Layout
루트 레이아웃은 앱 디렉토리의 최상위 수준에서 정의되며 모든 경로에 적용된다. 이 레이아웃은 필수적이며, 서버에 반환되는 초기 HTML을 수정할 수 있도록 <html> 과 <body> 태그를 포함해야 한다.
Nested Layout
기본적으로 폴더 계층 구조 내의 레이아웃은 중첩된다. 이는 레이아웃이 자식 레이아웃을 자신의 children prop을 통해 감싸는 것을 의미한다. 특정 경로 세그먼트(폴더) 내에 layout.js 파일을 추가함으로써 레이아웃을 중첩할 수 있다.
app/
├── layout.js
└── dashboard/
├── layout.js
└── page.js세그먼트 란?
세그먼트(segment)란 URL 경로에서 경로를 구성하는 각 부분을 말한다. 일반적으로 경로는 여러 세그먼트로 나뉘어지며, 각 세그먼트는 슬래시(/)로 구분된다.
예를 들어, 다음 URL에서 세그먼트는 다음과 같다
https://example.com/products/electronics/laptops
• 첫 번째 세그먼트: /products
• 두 번째 세그먼트: /electronics
• 세 번째 세그먼트: /laptops💡 알아두면 좋은 정보.
- 레이아웃으로는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있다.
- 루트 레이아웃에만
<html>및<body>태그를 포함할 수 있다. - 같은 폴더에 layout.js와 page.js 파일이 정의되어 있으면, 레이아웃은 페이지를 감싼다.
- 기본적으로 레이아웃은 서버 컴포넌트입니다만, 클라이언트 컴포넌트로 설정할 수도 있다.
- 부모 레이아웃과 자식 사이에서 데이터를 전달하는 것은 불가능하다. 그러나 같은 데이터를 경로에서 여러 번 가져오면 React가 자동으로 중복 요청을 제거하며 성능에 영향을 미치지 않는다.
- 레이아웃은 자신 아래의 경로 세그먼트에는 접근할 수 없다. 모든 경로 세그먼트에 접근하려면 클라이언트 컴포넌트 내에서 useSelectedLayoutSegment 또는 useSelectedLayoutSegments를 사용할 수 있다.
- Route Groups를 사용하여 특정 경로 세그먼트를 공유된 레이아웃에서 선택적으로 제외하거나 포함할 수 있다.
출처: Next.js 공식문서
