FrontEngineer JungBam
next 13 layout.tsx 컴포넌트 본문
layout이 무엇인가?
공식문서에 친절하게 잘 설명되어 있어서 공식문서 내용을 가져왔다.
설명에서 가장 중요한 부분은 공유되는 UI 인데 즉, 해당 경로와 (하위 경로에 다른 layout이 없는 경우)하위 경로에 공유할 수 있는 말그대로 레이아웃 컴포넌트인 것이다. 우리가 리액트로 개발할때 Header와 Footer를 BrowserRoute에서 처리했던 것 같이 말이다.
하위 경로에 layout이 있다면 그 경로와 그 경로 아래에서는 하위 경로에 있는 layout을 참조하게 된다.
root layout
넥스트 앱을 생성하면 app 경로에 layout.tsx 파일이 생성되는데 이 app 폴더에 있는 최상위 layout을 root layout이라고 한다. 이 root layout은 필수적이며, 모든 경로에서 참조되어 래핑하는 기능을 한다. 아래 이미지는 공식문서에서 가져온 것인데, 설명과 같이 root layout만 html, body 태그를 포함할 수 있다.
궁금한 것을 못참기 때문에 root layout 외에 다른 layout에서 <html>과 <body> 태그를 사용해보니 아래와 같은 에러가 발생한다. 내가 layout을 작성하다가 아래와 같은 런타임 에러가 발생한다면 root layout이 아닌 곳에 <html>이나 <body> 태그가 있는지 확인해보자.
중첩 레이아웃
아래 그림으로 모든 것이 설명된다. 즉 상위 layout은 하위 layout을 래핑함으로써 중첩되도록 동작된다. layout은 공유되는 UI를 담는 역활이기 때문에 경로 및 하위 경로에 공유되는 UI만을 포함하고 있어야 뜻하지 않게 하위 경로에서 내가 생각하지 않은 컴포넌트가 호출되는 일이 없을 것이다.
메타 데이터
next에서는 SEO최적화를 위해 메타데이터를 제공하는데 이 layout에서도 메타데이터를 심을 수 있다. 아래 코드를 통해서 설명하겠다.
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};이 코드는 정적 메타데이터를 심어놓은 것인데, 기본적으로 넥스트 앱을 만들면 root layout에 작성되어 있는 내용이다. 이렇듯 메타데이터를 layout 컴포넌트에서 정의할 수 있고 정적 메타데이터 외에도 동적 메타데이터 또한 다룰 수 있다. 이것은 별도의 포스팅을 작성할 예정인데 미리 궁금하다면 아래 링크를 통해 공식문서 내용을 확인해보면 좋을 것 같다.
Optimizing: Metadata | Next.js
Using App Router Features available in /app
nextjs.org
'next.js' 카테고리의 다른 글
| next 동작원리 읽기 (0) | 2023.07.26 |
|---|---|
| page 라우팅? app 라우팅? 뭐가 좋은데? (0) | 2023.07.25 |
| next에서 404 페이지 처리하기 (0) | 2023.07.24 |
| next에서의 라우팅 (0) | 2023.07.24 |
| next 시작하기 (0) | 2023.07.24 |
