-
[NextJS] 튜토리얼 챕터 4 - 레이아웃과 페이지 생성Web 2024. 5. 21. 08:27
들어가기 전에
이 글은 Next.js - Chapter 4 : Creating Layouts and Pages를 번역한 글입니다.
레이아웃과 페이지 생성
지금까지 만든 어플리케이션은 오직 홈페이지만 가지고 있습니다. 이제 페이지와 레이아웃을 이용해 더 많은 라우트를 생성하는 방법을 배워봅시다.
이번 챕터에서...
여기 우리가 다룰 주제들이 있습니다.
- 파일시스템 라우팅 방법을 사용해 대시보드 라우트를 만들겁니다.
- 새로운 라우트 경로를 만들때 폴더와 파일의 역할을 이해합니다.
- 여러 대시보드 페이지 간에 공통 사용될 중첩된 레이아웃을 생성합니다.
- 같이 있기(colocation), 부분 렌더링, 루트(root) 레이아웃을 이해합니다.
중첩 라우팅
Next.js는 폴더들로 라우트를 생성하는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL 경로와 매치되는 라우트 경로를 나타냅니다.
각 라우트마다
layout.tsx와page.tsx파일을 이용하여 별도의 UI를 만들 수 있습니다.page.tsx는 리액트 컴퍼넌트를 내보내고(export), 라우트 경로로 접근되어질 수 있도록 만들어진 특별한 Next.js 파일입니다. 지금까지 실습한 어플리케이션에서, 우리는 이미/app/page.tsx파일을 가지고 있고 -- 라우트/에서 접근가능한 홈페이지입니다.중첩 라우트 경로의 페이지를 생성하기 위해, 각각의 다른 폴더안에 다른 폴더를 중첩시키고 그안에
page.tsx파일을 넣습니다. 예를들어:
/app/dashboard/page.tsx파일은/dashboard경로와 매치됩니다. 어떻게 작동하는지 보기 위해 페이지를 생성해봅시다!대시보드 페이지 생성하기
app내에dashboard라고 이름 지어진 폴더를 생성하세요. 그리고, 다음과 같은 내용으로page.tsx파일을대시보드폴더 내에 생성하세요./app/dashboard/page.tsxexport default function Page() { return <p>Dashboard Page</p>; }이제, 개발서버가 동작하고 있는지 확인하고 http://localhost:3000/dashboard에 방문해보세요. "Dashboard Page"라는 글자를 볼 수 있을겁니다.
폴더를 이용해 새로운 라우트 경로를 만들고, 그곳에
page파일을 추가하는 것 이것이 Next.js에서 다른 페이지를 만드는 방법입니다.Next.js에서
page파일에 특별함 이름을 주는것으로 UI 컴퍼넌트나, 테스트 파일들, 라우트와 관련된 다른 코드들이같이 있을(colocate)수 있게됩니다. 오직page파일의 내용만이 공개적으로 접근가능합니다. 예를들어,/ui와/lib폴더들은/app폴더 내에 당신의 경로를 따라 같이 있습니다.실습해보기: 대시보드 페이지 생성하기
더 많은 라우트 만들기 실습을 해봅시다. 대시보드에서 2개의 페이지를 더 생성하세요.
- Customer 페이지: 이 페이지는 http://localhost:3000/dashboard/customers에서 접근 가능해야 합니다. 지금은
<p>Customers Page</p>만 리턴해야 합니다. - Invoices 페이지: 이 페이지는 http://localhost:3000/dashboard/invoices에서 접근 가능해야 합니다. 지금은 마찬가지로
<p>Invoices Page</p>를 리턴하도록 합시다.
이 실습을 해결하기 위해 고민과 시간을 들인 후에, 준비가 되면 아래 버튼을 눌러 해답을 보세요.
다음과 같은 폴더 구조를 가져야 합니다.
Customers 페이지:
/app/dashboard/customers/page.tsxInvoices 페이지:export default function Page() { return <p>Customers Page</p>; }/app/dashboard/invoices/page.tsxexport default function Page() { return <p>Invoices Page</p>; }대시보드 레이아웃 생성하기
대시보드는 여러페이지에서 공유되는 네비게이션 메뉴가 있습니다. Next.js에서는 이렇게 여러 페이지에서 공유되어지는 UI를 생성하기 위한
layout.tsx를 사용할 수 있습니다. 대시보드 페이지를 위한 레이아웃을 만들어 봅시다!/dashboard폴더 안에,layout.tsx파일을 새로 추가하고 아래 코드를 붙여넣읍시다./app/dashboard/layout.tsximport 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 />컴퍼넌트를 레이아웃에 불러오고(import) 있습니다. 이 파일에 불러오는 어떤 컴퍼넌트도 레이아웃의 일부가 됩니다.<Layout />컴퍼넌트는childrenprop을 받습니다. 이 것은(children) 페이지가 될 수 있고 또 다른 레이아웃이 될 수 있습니다. 지금은 아래와 같이/dashboard안에 페이지들은 자동으로<layout />내부로 중첩 될 겁니다.
변경사항을 저장하고, 로컬호스트에서 모든게 정확히 돌아가는지 확인해봅시다. 다음과 같은 화면을 보아야 합니다.
Next.js에서 레이아웃을 사용했을때 한가지 장점은, 페이지 이동에서 레이아웃은 렌더링이 되지 않지만, 오직 페이지 컴퍼넌트만 변경됩니다. 이것을 부분 렌더링이라 부릅니다.
루트(Root) 레이아웃
챕터 3에서, 우리는 아래와 같이
Inter폰트를 다른 레이아웃인/app/layout.tsx에 불러(import)왔습니다./app/layout.tsximport '@/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> ); }이것은
루트 레이아웃(root layout)이라고 부르고, 필수인 파일입니다. 우리가 루트 레이아웃(root layout)에 추가하는 어느 UI도 어플리케이션 내 모든 페이지에서 공유됩니다. 만약<html>그리고<body>를 변경하고 싶다거나 metadata를 추가하고 싶다면 이 루트 레이아웃(root layout)을 이용할 수 있습니다.(metadata에 대해 추후 챕터에서 배울겁니다.)퀴즈할 시간입니다!
익힌걸 테스트해보고 무엇을 배웠는지 봅시다.
Next.js에서 레이아웃을 사용하는 목적은 무엇일까요?
A 전역 에러 핸들러로서 동작하기 위해B 앱 전반에 걸쳐 데이터를 가져오고, 상태값을 관리하기 위해C 여러 페이지들 간 UI를 공유하기 위해D 전체 어플리케이션에서 시작위치로 동작하기 위해챕터 4를 완료했습니다.
훌륭합니다, 대시보드 앱은 이제 서서히 완성되고 있습니다.
Ref
'Web' 카테고리의 다른 글
[NextJS] 튜토리얼 챕터 6 - 데이터 베이스 세팅하기 (0) 2024.05.24 [NextJS] 튜토리얼 챕터 5 - 페이지간 이동 (0) 2024.05.23 [NextJS] 튜토리얼 챕터 3 - 폰트와 이미지 최적화 (0) 2024.05.19 [NextJS] 튜토리얼 챕터 2 - CSS 스타일하기 (0) 2024.05.14 [NextJS] 튜토리얼 Intro - Next.js 배우기 (0) 2024.05.13