해당 글은 Next.js 공식문서를 해석한 글입니다.
학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.
정확한 내용은 아래의 공식문서를 참고해주세요!
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
Next에서는 특별한 파일 컨벤션이 있다는 것을 지난 글에서 소개했어요.
그 중 layout.js page.js, template.js는 특정 라우트의 UI를 생성하기위해 사용되어요.
이 글에서는 이 특별한 파일들을 언제, 어떻게 사용하는지에 대해 알려드리겠습니다.
Pages
page.js는 특정 라우트의 고유한 UI를 포함합니다.
page.js에서 리액트 컴포넌트를 export 하여 정의할 수 있어요.
Example
app 디렉토리 하위에 page.js를 생성하고, 메인 페이지에 노출되었으면 하는 컴포넌트를 작성하여 export 합니다.
// app/page.tsx
export default function Page() {
return <h1>Hello, Home page!</h1>
}
위와 같이 설정했을 때
app 디렉토리는 root segment이기 때문에 'domain.com'에 진입하면 Hello, Home page! 라는 텍스트를 확인할 수 있어요.
만약 domain.com/dashboard에 진입했을 때 특정 UI가 노출되기를 원한다면,
마찬가지로 app/dashboard 디렉토리 하위에 page.js를 생성하고 컴포넌트를 export하면 됩니다.
// `app/dashboard/page.tsx`
export default function Page() {
return <h1>Hello, Dashboard Page!</h1>
}Layouts
layout은 여러 라우트에서 공용으로 사용하는 UI입니다.
네비게이션 UI를 떠올려보면, 라우트가 이동해도 위치나 상태 동작 등은 유지되고 리랜더링되지도 않습니다.
이해를 돕기 위해 무신사의 일부 페이지를 예시로 가져왔어요.
탭을 변경할 때 url 이 변경되고 하위 내용은 모두 리랜더링이 되는데, 가장 상단의 네비게이션 UI는 리랜더링되지 않고 그대로 유지가 됩니다. 이 UI가 바로 Layout UI입니다.
Layout UI는 layout.js 파일에서 리액트 컴포넌트를 export 하여 정의할 수 있어요.
Example
dashboard 하위의 layout.js은/dashboard 라우트와 /dashboard/settings 라우트에 공통으로 적용됩니다.
layout.js에 정의된 컴포넌트(DashboardLayout)는 props로 children을 받아오고,
그 자리에 하위 자식 컴포넌트의 페이지(dashboard/pages.js 또는 dashboard/settings/page.js)로 채워지게 됩니다.
// app/dashboard/layout.js
export default function DashboardLayout({
children
}: { children: React.ReactNode }){
return (
<section>
<!--하위 라우트에서 공통으로 사용될 UI를 작성합니다.-->
<nav></nav>
{children}
</section>
)
}Template
Template은 자식 페이지를 감싼다는 점에서 layout과 유사해요.
하지만 route가 변경되어도 state가 유지되는 layout과 달리, template은 route가 변경되면 새로운 instance를 생성하기 때문에 state가 유지되지 않습니다.
Template은 template.js 리액트 컴포넌트를 export 하여 정의할 수 있습니다.
Layout과 마찬가지로 children prop을 받아야 합니다.
Example
// app/template.js
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}
위와 같이 하나의 디렉토리에 layout.js, template.js, page.js가 모두 있을 경우 컴포넌트 위계에 따라 다음과 같이 리액트 컴포넌트가 생성됩니다.
<Layout>
<Template key={routeParam}>{children}</Template>
</Layout>Metadata
Metadata API를 사용하여 title과 같은 meta 정보를 담고있는 <head> HTML element를 수정할 수 있습니다.
Meatadata는 layout.js 혹은 page.js 파일 내부에서 metadata 객체를 export 하여 정의할 수 있습니다.
Example
// app/page.tsx
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Next.js',
}
export default function Page() {
return '...'
}'개발 > Next' 카테고리의 다른 글
| [Next14] 검색 기능 만들기 with Supabase (0) | 2024.11.04 |
|---|---|
| [Next14] To Do List 만들기 with Supabase (2) Next API Route 사용하여 할 일 목록 구현하기 (2) | 2024.07.08 |
| [Next14] To Do List 만들기 with Supabase (1) 프로젝트 세팅 (0) | 2024.07.07 |
| [Next14] 라우트 정의하기 : Defining Routes (0) | 2024.05.26 |
| [Next14] 라우팅 기초 : Routing Fundamentals (0) | 2024.05.26 |
