Application을 build 할 때 Header, Layout, Sidebar, Footer 등의 화면과 같이 모든 파일에 컴포넌트를 복사하지 않고도 어느 위치에서나 계속해서 재사용해야하는 화면들이 존재한다.
이렇게 반복적으로 사용되는 화면들을 위한 Next.js의 레이아웃 시스템(Layout System)을 알아보자.
Layouts
Next.js에서는 Layout 컴포넌트의 export default 된 Layout Component를 먼저 렌더링 한 후, 접속 URL을 확인하여 URL의 Target Component를 Layout 컴포넌트의 child로 렌더링 한다.
설명이 장황하니 Layout 컴포넌트를 코드로 살펴보자.
//Layout.tsx
...
export default function Layout({children} : {children: React.ReactNode}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
위 코드에서 보이듯 Layout은 React 프로젝트의 index.html , App.js 와 같은 화면 진입점의 역할을 하며 <html>을 렌더링 하게 된다. 이때 props로 React.ReactNode 타입의 children을 받고 있음을 알 수 있다.
화면의 렌더링 순서는 Layout Component ⇒ Children(Target) Component 순서로 진행 된다.
즉, Next.js에서 렌더링하고자 하는 모든 컴포넌트는 레이아웃의 children으로 속하기 때문에 고정 및 반복적으로 사용되는 컴포넌트의 경우 Layout 컴포넌트에서 사용하면 된다.
그래서 사용자는 layout 파일만으로 손쉽게 레이아웃 구조를 제어할 수 있는 것이 Nextjs의 또 하나의 장점이 아닐까.
Specification Layout
설계하고자 하는 화면에 따라 예외적으로 적용해야 하는 레이아웃이 있을 수도 있다. 그렇담 이번에는 예외적인 화면에 대하여 Layout을 따로 적용할 수 있는 방법을 알아보자.
만약 사내 홈페이지 사이트의 프로젝트 디렉토리 구조가 아래와 같은 구조를 가지며 header, footer, sidebar와 같은 공통 레이아웃은 app\layout.tsx 에 정의되어 있다고 가정하자.
root directory
└ .next
└ app
└ about-us
└ company
└ jobs
└ layout.tsx
└ page.tsx
└ not-found.tsx
└ components
└ node_modules
└ package-lock.json
└ package.json
여기서 회사에 대한 소개를 company 경로의 페이지에만 예외적으로 다른 레이아웃을 적용하고 싶다면 company 디렉토리의 하위에 company\layout.tsx 파일을 추가하여 사용하면 된다.
root directory
└ .next
└ app
└ about-us
└ company
└ ⭐layout.tsx⭐
└ page.tsx
└ jobs
└ layout.tsx
└ page.tsx
└ not-found.tsx
└ components
└ node_modules
└ package-lock.json
└ package.json
Nextjs는 URL을 통해 폴더로 들어가서 레이아웃이 있으면 Root 레이아웃의 하위 레이아웃을 렌더링 한다. 즉 Root Layout Component ⇒ Children Layout ⇒ Children (Target) Component 으로 레이아웃 구조가 중첩 렌더링 될 수 있음을 알 수 있다.
'Nextjs' 카테고리의 다른 글
| [Next.js] Nextjs의 Route(라우팅 시스템) (0) | 2024.06.06 |
|---|
