레이아웃
Next.js는 layout.tsx 파일을 사용하여 여러 세그먼트에서 공유되는 UI를 레이아웃으로 설정합니다.
레이아웃 역시 컴포넌트이며, page.tsx 파일에서 렌더링되는 UI가 children에 할당됩니다.
다음 예시는 루트 레이아웃 코드입니다. (루트 레이아웃은 반드시 html, body 태그를 포함해야 합니다.)
export default function Layout({children} : {children: React.ReactNode}) {
return <html lang='en'>
<body>
<div>
<h1>Hello Layout!</h1>
{children}
</div>
</body>
</html>
}루트 레이아웃의 children에는 다음과 같은 app/page.tsx 파일에서 렌더링되는 UI가 자동으로 할당됩니다.
export default function Page() {
return <div>Hello Page!</div>
}즉, 위 레이아웃과 페이지를 모두 사용하면 다음과 같은 코드를 얻을 수 있습니다.
export default function Layout({children} : {children: React.ReactNode}) {
return <html lang='en'>
<body>
<div>
<h1>Hello Layout!</h1>
<div>Hello Page!</div>
</div>
</body>
</html>
}부분 렌더링
Next.js에서 클라이언트 측 탐색을 수행하기 위해서는 Link 컴포넌트를 사용합니다.
클라이언트 측 탐색시 현재 페이지와 이동할 페이지가 같은 레이아웃을 공유하고 있다면 레이아웃은 리렌더링 되지 않고, 오직 페이지 파일이 렌더링하는 UI만 새로 렌더링됩니다.
Next.js에서는 이러한 렌더링 방법을 부분 렌더링 (Partial Rendering)이라고 합니다.
부분 렌더링이 없다면 클라이언트 측 탐색을 수행할 때마다 전체 페이지를 렌더링해야하지만, 부분 렌더링을 통해 변경된 세그먼트만 렌더링하여 전송되는 데이터의 양과 실행 시간을 감소시킬 수 있습니다.
'Next.js > Learn Next.js' 카테고리의 다른 글
| [Learn Next.js] 클라이언트 - 서버 워터폴과 병렬 데이터 가져오기 (0) | 2024.05.07 |
|---|---|
| [Learn Next.js] 데이터 가져오기 (0) | 2024.05.07 |
| [Learn Next.js] 활성 링크 표시 패턴 (usePathname, clsx) (0) | 2024.05.07 |
| [Learn Next.js] 이미지 최적화 (0) | 2024.05.07 |
| [Learn Next.js] 글꼴 최적화 (0) | 2024.05.07 |
