본문 바로가기
Next.js

Next.js 11-2 Routing Pages and Layouts

지성현 2023. 5. 19. 17:16
  • Page

  페이지는 경로에 고유한 UI이다. page.js 파일에서 컴포넌트를 내보내어 페이지를 정의할 수 있다. 중첩 폴더를 사용하여 경로를 정의하고 page.js 파일을 정의하여 경로를 공개적으로 액세스 할 수 있도록 한다.

  app 디렉토리 내부에 page.js 파일을 추가하여 첫 번째 페이지를 만든다.

app -- ('/')
     |
  page.js
  dashboard -- ('/dashboard')
             |
          pages.js
// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
  return <h1>Hello, Home page!</h1>
}
// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

 

  페이지는 항상 경로 하위 트리의 리프이고, .js .jsx 또는 .tsx 파일 확장자를 페이지에 사용할 수 있다. 그리고 경로 세그먼트를 공개적으로 액세스 하려면 page.js 파일이 필요하다. 페이지는 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정할 수도 있다. 마지막으로 페이지는 데이터를 가져올 수 있다.

 

  • Layout

  레이아웃은 여러 페이지 간에 공유되는 UI이다. 탐색 시 레이아웃은 상태를 유지하고 대화형 상태를 유지하며 다시 렌더링 하지 않는다. 레이아웃은 중첩될 수도 있다.

  layout.js 파일에서 React 컴포넌트를 내보내 레이아웃의 default를 정의할 수 있다. 컴포넌트는 children 렌더링 중에 자식 레이아웃(있는 경우) 또는 자식 페이지로 채워질 prop을 수락해야 한다.

app --
     |
     dashbaord --
                |
                layout.js
                page.js
                settings --
                          |
                          page.js
export default function DashboardLayout({
  children, // will be a page or nexted layout
}: {
  children: React.ReactNode;
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
      
      {children}
    </section>
  )
}

 

  최상위 레이아웃을 루트 레이아웃이라고 하는데, 이 필수 레이아웃은 애플리케이션의 모든 페이지에서 공유된다. 루트 레이아웃은 html 및 body 태그가 포함되어야 한다.

  모든 경로 세그먼트는 선택적으로 자체 레이아웃을 정의할 수 있다. 이러한 레이아웃은 해당 세그먼트의 모든 페이지에서 공유된다.

  경로의 레이아웃은 기본적으로 중첩된다. 각 상위 레이아웃은 React children prop을 사용하여 하위 레이아웃을 래핑 한다. 그리고 경로 그룹을 사용하여 공유 레이아웃 안팎으로 특정 경로 세그먼트를 옵트인 할 수 있다.

  레이아웃은 기본적으로 서버 컴포넌트이지만 클라이언트 컴포전트로 설정할 수 있다. 그리고 레이아웃은 데이터를 가져올 수 있다.

  상위 레이아웃과 해당 레이아웃 간에 데이터를 전달할 수 없다. 그러나 경로에서 동일한 데이터를 두 번 이상 가져올 수 있으며 React는 성능에 영향을 주지 않고 요청을 자동으로 중복 제거한다.

  레이아웃은 현재 경로 세그먼트에 액세스 할 수 없다. 경로 세그먼트에 액세스 하려면 클라이언트 컴포넌트에서 useSelectedLayoutSegment를 사용하거나 useSelectedLayoutSegments를 사용해야 한다.

 

  • Loot Layout (required)

  루트 레이아웃은 app 디렉토리의 최상위 수준에서 정의되며 모든 경로에 적용된다. 이 레이아웃을 사용하면 서버에서 반환된 초기 HTML을 수정할 수 있다.

// app/Layout.tsx

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

 

  app 디렉토리는 루트 레이아웃을 포함해야 한다. 그리고 루트 레이아웃은 Next.js가 자동으로 생성하지 않기 때문에 <html>과 <body> 태그를 정의해야 한다. 내장된 SEO 지원을 사용하여 <head> HTML 요소(예: <title> 요소)를 관리할 수 있다. 또 경로 그룹을 사용하여 여러 레이아웃을 만들 수 있고, 루트 레이아웃은 기본적으로 서버 컴포넌트이며 클라이언트 컴포넌트로 설정할 수 없다.

 

  • 중첩 레이아웃

  폴더 내 정의된 레이아웃(예: app/dashboard/layout.js)은 특정 경로 세그먼트(예: acme.com/dashboard)에 적용되며 해당 세그먼트가 활성화될 때 렌더링된다. 기본적으로 파일 계층 구조의 레이아웃은 중첩된다. 즉, children prop을 통해 하위 레이아웃을 래핑 한다.

app --
     |
     layout.js
     page.js
     dashboard --
                |
                layout.js
                page.js
export default fuction DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <section>{children}</section>
}

  위의 두 레이아웃을 결합하는 경우 루트 레이아웃(app/layout.js)은 대시보드 레이아웃(app/dashboard/layout.js)을 래핑하고 app/dashbaord/* 내부 경로 세그먼트를 래핑 한다. 경로 그룹을 사용하여 공유 레이아웃 안팎으로 특정 경로 세그먼트를 옵트인 할 수는 없다.

 

  • 템플릿

  템플릿은 각 하위 레이아웃 또는 페이지를 래핑 한다는 점에서 레이아웃과 유사하다. 경로 간에 유지되고 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시 각 자식에 대해 새 인스턴스를 만든다. 이는 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트 되고, DOM 요소가 다시 생성되며 상태가 유지되지 않고 효과가 다시 동기화됨을 의미한다.

  이러한 특정 동작이 필요한 경우 있을 수 있으며 레이아웃보다 템플릿이 더 적합한 옵션이다. 예를 들어 CSS 또는 애니메이션 라이브러리를 사용하여 애니메이션을 시작/종료하는 경우, useEffect(예: 페이지 보기 기록) 및 useState(예: 페이지별 피드백 양식)에 의존하는 기능, 기본 프레임워크 동작을 변경하는 경우(예를 들어 레이아웃 내부의 서스펜스 경계는 페이지를 전환할 때가 아니라 레이아웃이 처음 로드될 때만 폴백을 표시한다. 템플릿의 경우 각 탐색이 폴백이 표시된다.)가 있다.

  템플릿은 template.js 파일에서 기본 React 컴포넌트를 내보내서 정의할 수 있다. 컴포넌트는 중첩된 세그먼트가 children이 될 prop을 수락해야 한다.

app --
     |
     layout.js
     template.js
     page.js
// app/template.tsx

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

<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

 

  • Modifying <head>

  앱 디렉토리에서 내장된 SEO 지원을 사용하여 제목 및 메타와 같은 <head> HTML 요소를 수정할 수 있다. 메타데이터는 layout.js 또는 page.js 파일에서 메타데이터 개체 또는 generateMetadata 함수를 내보내서 정의할 수 있다.

// app/page.tsx

import { MetaData } from 'next';

export const metadata: Metadata = {
  title: 'Next.js'
};

export default function Page() {
  return '...';
}

  루트 레이아웃에 <title> 및 <meta>와 같은 <head> 태그를 수동으로 추가하면 안 된다. 대신 <head> 요소 스트리밍 및 중복 제거와 같은 고급 요구 사항을 자동으로 처리하는 메타데이터 API를 사용해야 한다.

저작자표시 비영리

'Next.js' 카테고리의 다른 글

Next.js 11-4 Routing Route Groups  (0) 2023.05.24
Next.js 11-3 Routing Linking and Navigating  (0) 2023.05.23
Next.js 11-1 Routing Fundamentals  (0) 2023.05.18
Next.js 10-5 React Essential Context  (0) 2023.05.18
Next.js 10-4 React Essential Context  (0) 2023.05.17

'Next.js' Related Articles

티스토리툴바