04. 레이아웃 및 페이지 만들기

지금까지 애플리케이션에는 메인 페이지만 있었다. 레이아웃 과 페이지를 사용하여 더 많은 경로를 생성하는 방법을 알아보자.

이 챕터에서 다룰 주제는 다음과 같다.

파일 시스템 라우팅을 사용하여 dashboard 경로를 만든다 .
새 경로 세그먼트를 생성할 때 폴더와 파일의 역할을 이해한다.
여러 대시보드 페이지 간에 공유할 수 있는 네스티드 레이아웃을 만든다.
코로케이션, 부분 렌더링, 루트 레이아웃이 무엇인지 이해다.

중첩 라우팅

Next.js는 중첩된 경로를 만드는데, 파일 시스템 라우팅을 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다.

layout.tsx 및 page.tsx 파일을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있다.

page.tsx는 React 컴포넌트를 내보내는 특수 Next.js 파일이며 경로에 액세스하는 데 필요하다. 애플리케이션에는 이미 페이지 파일 /app/page.tsx가 있고, 이는 / 경로와 연결된 메인 페이지이다.

중첩된 경로를 만들려면 폴더를 서로 중첩하고 그 안에 page.tsx 파일을 추가하면 됩니다. 예를 들어:

/app/dashboard/page.tsx는 /dashboard 경로와 연결되어 있다. 페이지를 만들어서 어떻게 작동하는지 살펴보자!

대시보드 페이지 만들기

/app 안에 dashboard라는 새 폴더를 만들고, 그 다음 대시보드 폴더 내에 다음 콘텐츠로 새 page.tsx 파일을 만든다.

/app/dashboard/page.tsx

export default function Page() {
  return <p>Dashboard Page</p>;
}

이제 개발 서버가 실행 중인지 확인하고 http://localhost:3000/dashboard를 열어보자. "Dashboard Page" 텍스트가 표시되어야 한다.

Next.js에서 다양한 페이지를 생성하는 방법은 다음과 같다. 폴더를 사용하여 새 경로 세그먼트를 생성하고 그 안에 페이지 파일을 추가한다.

페이지 파일에 특별한 이름을 지정함으로써 Next.js를 사용하면 UI 컴포넌트, 테스트 파일 및 기타 관련 코드를 경로와 함께 배치할 수 있다. 페이지 파일 내부의 콘텐츠에만 공개적으로 액세스할 수 있다. 예를 들어 /ui 및 /lib 폴더는 경로와 함께 /app 폴더 내에 같은 위치에 있다.

연습: 대시보드 페이지 생성

더 많은 경로를 만드는 연습 해보자. 대시보드에서 두 개의 페이지를 더 만들 예정이다.

고객 페이지: 이 페이지는 http://localhost:3000/dashboard/customers에서 액세스할 수 있어야 한다. 지금은 <p>Customers Page</p> 엘리먼트를 반환해야 한다.
송장 페이지: 송장 페이지는 http://localhost:3000/dashboard/invoices에서 액세스할 수 있어야 한다. 지금은 <p>Invoices Page</p> 엘리먼트도 반환한다.

준비가 되면 아래 결과를 확인하자.

아래와 같은 폴더 구조를 가져야한다.

고객 Page:

/app/dashboard/customers/page.tsx

export default function Page() {
  return <p>Customers Page</p>;
}

송장 Page:

/app/dashboard/invoices/page.tsx

export default function Page() {
  return <p>Invoices Page</p>;
}

대시보드 레이아웃 만들기

대시보드에는 여러 페이지에서 공유되는 일종의 탐색 기능이 있다. Next.js에서는 특수 레이아웃.tsx 파일을 사용하여 여러 페이지 간에 공유되는 UI를 만들 수 있다. 대시보드 페이지의 레이아웃을 만들어 보겠다!

/dashboard 폴더 내에layout.tsx라는 새 파일을 추가하고 다음 코드를 붙여넣는다.

/app/dashbord/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

이 코드에서는 일어나는 몇 가지 일을 분석해보자.

먼저 <SideNav /> 컴포넌트를 레이아웃으로 가져온다. 이 파일로 가져오는 모든 컴포넌트는 레이아웃의 일부가 된다.

<Layout /> 컴포넌트는 children 속성을 받는다. 이 하위 항목은 페이지일 수도 있고 다른 레이아웃일 수도 있다. 귀하의 경우 /dashboard 내부의 페이지는 다음과 같이 자동으로 <Layout /> 내부에 중첩된다.

변경 사항을 저장하고 로컬 호스트를 확인하여 모든 것이 올바르게 작동하는지 확인하자. 아래와 같이 표시될 것이다.

Next.js에서 레이아웃을 사용할 때의 이점 중 하나는 탐색 시 페이지 컴포넌트만 업데이트되고 레이아웃은 다시 렌더링되지 않는다는 것이다. 이를 부분 렌더링이라고 한다.

루트 레이아웃

3장에서는 Inter 폰트를 다른 레이아웃인 /app/layout.tsx로 가져왔다. 다시 한번 상기하자:

/app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

이를 루트 레이아웃이라고 하며 필수적으로 필요하다. 루트 레이아웃에 추가하는 모든 UI는 애플리케이션의 모든 페이지에서 공유된다. 루트 레이아웃을 사용하여 <html> 및 <body> 태그를 수정하고 메타데이터를 추가할 수 있다(나중 장에서 메타데이터에 대해 자세히 알아본다).

방금 생성한 새 레이아웃(/app/dashboard/layout.tsx)은 대시보드 페이지(경로)에 한정되기 때문에 루트 레이아웃을 건드릴 필요가 없다.

'Next.js 개발 가이드 > 06. Learn Next.js 공식 가이드' 카테고리의 다른 글

06. 데이터베이스 설정 (0)	2023.12.23
05. 페이지간 이동 (0)	2023.12.22
03. 폰트 및 이미지 최적화 (0)	2023.12.20
02. CSS 스타일링 (0)	2023.12.20
01. 시작 (0)	2023.12.20