[NextJS] Pages, Layouts

728x90

Next 13은 pages, layouts, templates를 쉽게 만드는 새로운 파일 컨벤션을 도입했다.

Layouts

여러 pages 간에 공유되는 UI이다.

layout은 상태를 보존하고, 인터랙티브를 유지하고 재렌더링을 하지 않는다.
layout.js 파일에서 default export로 정의할 수 있다.
child 레이아웃이나 child 페이지가 있는 경우에, 항상 children props를 설정해야한다.

// app/dashboard/layout.tsx

export default function DashboardLayout({
  children, // 페이지가 있거나, 중첩된 레이아웃이 있는 경우
}: {
  children: React.ReactNode,
}) {
  return (
    <section>
      {/* 헤더나 사이드바처럼 공유되는 UI를 정의할 수 있다. */}
      <nav></nav>

      {children}
    </section>
  );
}

모든 페이지에 공유되는 루트 레이아웃은 반드시 html, body 태그가 있어야한다.
레이아웃은 기본적으로 children props를 통해 중첩된다.
특정 route에서 공유되는 레이아웃을 제외하고 싶을 때에는 Route Group을 사용할 수 있다.
레이아웃은 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정할 수 있다.
레이아웃은 데이터를 패치할 수 있다.
부모 레이아웃, 자식 레이아웃 간의 데이터를 전달할 수 없다. 하지만 같은 데이터를 여러번 패치할 수 있다.
layout.js와 page.js. 파일은 같은 폴더에 정의할 수있다. 레이아웃은 페이지를 감싼다.

Root Layout (필수)

app 디렉토리에 루트 레이아웃을 정의할 수 있다.

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

app 디렉토리는 반드시 루트 레이아웃을 포함해야한다.
루트 레이아웃은 반드시 <html>, <body>를 포함해야한다.
head.js 파일을 사용해서 <head> 요소를 관리할 수 있다.
route group을 사용해서 여러개의 루트 레이아웃을 만들 수 있다.
루트 레이아웃은 기본적으로 서버 컴포넌트이고 클라이언트 컴포넌트로 설정할 수 없다.

중첩 Layout

기본적으로 layout은 중첩된다.

Template

// app/template.tsx

export default function Template({ children }: {
  children: React.ReactNode
}) {
  return <div>{children}</div>;
}

Template는 자식 layout, page를 감싼다는 점에서 layout과 비슷하다.

route와 state를 유지하는 layout과는 다르게, template는 새로운 인스턴스를 만든다.

사용자가 template를 공유하는 페이지를 변경할때, 컴포넌트의 새로운 인스턴스가 마운트되어 DOM 요소가 다시 생성된다.

즉, Template에서는 상태는 유지되지 않고, 모든 effect는 다시 연결된다.

Template vs Layout

아래와 같은 경우에 template를 사용하는게 적절하다.

CSS, 애니메이션 라이브러리를 사용해서 애니메이션을 시작하거나 종료할 때
useEffect, useState에 의존하는 기능인 경우
기본 프레임워크 동작을 변경하는 경우
- 예를 들어, 레이아웃 내부의 Suspense Boundary는 레이아웃이 로드되기 전 처음에만 fallback을 보여주고 페이지를 변경하는 경우에는 fallback을 보여주지 않는다. 이 때, template를 사용하면 페이지가 변경될 때마다 fallback을 보여줄 수 있다.

위와 같은 경우가 아니라면 Next에서는 Layout을 사용하는 것을 권장하고 있다.