현인

Next.js 튜토리얼 - 4장 레이아웃 및 페이지 만들기 본문

기술 학습/NextJS

Next.js 튜토리얼 - 4장 레이아웃 및 페이지 만들기

현인(Hyeon In) 2024. 11. 15. 14:14

지금까지 만든 어플리케이션은 홈 화면 하나 뿐이다. 이제 레이아웃과 페이지들을 가지고 더 많은 라우팅 지점들을 만들 수 있는 방법을 알아보자.

4장에서 다룰 내용

  1. 파일시스템 라우팅을 활용하여 dashboard 경로 생성
  2. 새로운 경로 세그먼트를 만들 때 폴더와 파일들의 역할 이해
  3. 여러 대시보드 페이지에서 공유할 수 있는 중첩 레이아웃 만들기
  4. 콜로케이션, 부분 렌더링 그리고 루트 레이아웃

중첩 라우팅

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 라는 새 폴더를 만든다. 그 다음 /dashboard 폴더 내부에 page.tsx 파일을 만든다. 아래와 같이 코드를 입력한다.

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

http://localhost:3000/dashboard 경로로 들어가보자. 아래와 같은 화면이 보이면 성공이다.

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

Next.js는 page라는 파일에 대한 특별한 이름을 가지므로 UI 구성 요소, 테스트 파일 및 기타 관련 코드를 경로와 함께 배치 할 수 있다. page 파일 내부의 콘텐츠만 공개적으로 액세스 할 수 있다. 예를 들어, /ui 및 /lib 폴더는 경로와 함께 /app 폴더 내부에 함께 배치 된다.

대시보드 페이지 만들기 연습

더 많은 경로를 만드는 연습 단계가 있다. 아래 설명대로 직접 만들어보자.

  1. customers 페이지
  2. invoices 페이지

아래와 같은 모습이 나오면 성공이다.

필자는 다음과 같이 코드를 작성했다.

/dashboard/customers/page.tsx

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

/dashboard/invoices/page.tsx

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

대시보드 레이아웃 만들기

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

/dashboard 폴더 안에 layout.tsx 파일을 새로 추가하고 다음 코드를 붙여 넣어보자.

 
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 /> 컴포넌트를 가져오고 있다. 사이드 네비게이션 바 일 것이라 생각한다.

children prop을 받고 있는데, 이 때 children은 페이지가 될 수도 있고 또 다른 레이아웃이 될 수도 있다.

일단 이번 프로젝트의 경우엔 다음과 같이 /dashboard 내부 페이지가 자동으로 중첩된다.

이제 작업한 내용을 저장해서 결과물을 보면, 다음과 같이 떠야 한다.

Next.js에서 레이아웃을 사용하는 한 가지 이점은 네비게이팅 시 페이지 컴포넌트만 업데이트되고 레이아웃은 다시 렌더링 되지 않는다는 것이다. 이것을 부분 렌더링이라 부른다.

루트 레이아웃

3장에서 Inter 글꼴을 /app/layout.tsx 로 가져왔었다. 해당 레이아웃은 루트 레이아웃이며, 필수적이다. 루트 레이아웃에 추가하는 모든 UI는 어플리케이션의 모든 페이지에서 공유된다. 루트 레이아웃을 사용하여 <html> 및 <body> 태그를 수정할 수 있고 더 나아가 메타데이터도 추가할 수 있다.

방금 우리가 만든 /app/dashboard/layout.tsx와 같은 레이아웃은 대시보드의 하위 경로에 대해서만 적용된다. 따라서 루트 레이아웃에 UI를 추가할 필요가 없다.

마치며

왜 Next.js가 프레임워크인지 알 수 있는 챕터였다. React를 개발해본 사람들은 알겠지만 라우터 설정을 직접 해줘야하는데, Next.js는 폴더 경로만 맞춰주면 라우터 설정을 알아서 해준다..! 레이아웃 개념도 복잡하지 않아서 신기하고 재밌는 경험이었다.

학습 자료

https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages

 

Learn Next.js: Creating Layouts and Pages | Next.js

Create the dashboard routes and a shared layout that can be shared between multiple pages.

nextjs.org

 

반응형
저작자표시

'기술 학습 > NextJS' 카테고리의 다른 글

[Next.js] 동적 렌더링 최적화하기  (1) 2024.11.25
Next.js 튜토리얼 - 5장 페이지 네비게이팅  (2) 2024.11.15
Next.js 튜토리얼 - 3장 폰트 및 이미지 최적화  (4) 2024.11.08
Next.js 튜토리얼 - 2장 CSS 스타일링  (1) 2024.11.06
Next.js 튜토리얼 - 1장 시작하기  (5) 2024.11.06
'기술 학습/NextJS' Related Articles more