M

MLOG

한국어

Next.js에서 확장 가능하고 동적인 UI를 구현하세요. 본 가이드는 체계적인 구성을 위한 라우트 그룹과 복잡한 대시보드를 위한 병렬 라우트를 심층적으로 다룹니다. 지금 바로 실력을 향상시키세요!

Next.js 앱 라우터 마스터하기: 라우트 그룹과 병렬 라우트 아키텍처 심층 분석

Next.js 앱 라우터의 등장은 개발자들이 이 인기 있는 React 프레임워크로 웹 애플리케이션을 구축하는 방식에 패러다임 전환을 가져왔습니다. 페이지 라우터(Pages Router)의 파일 기반 규칙에서 벗어나, 앱 라우터는 더 강력하고 유연하며 서버 중심적인 모델을 도입했습니다. 이러한 발전 덕분에 우리는 더 뛰어난 제어력과 조직적인 구조로 매우 복잡하고 성능이 뛰어난 사용자 인터페이스를 만들 수 있게 되었습니다. 도입된 가장 혁신적인 기능 중에는 라우트 그룹(Route Groups)과 병렬 라우트(Parallel Routes)가 있습니다.

엔터프라이즈급 애플리케이션을 구축하려는 개발자에게 이 두 가지 개념을 마스터하는 것은 단지 유익한 것을 넘어 필수적입니다. 이들은 레이아웃 관리, 라우트 구성, 그리고 대시보드와 같은 동적인 다중 패널 인터페이스 생성과 관련된 일반적인 아키텍처 문제를 해결합니다. 이 가이드는 전 세계 개발자들을 대상으로 라우트 그룹과 병렬 라우트에 대한 포괄적인 탐구를 제공하며, 기초 개념부터 고급 구현 전략 및 모범 사례까지 다룹니다.

Next.js 앱 라우터 이해하기: 간단한 복습

세부 사항으로 들어가기 전에, 앱 라우터의 핵심 원칙을 간단히 다시 살펴보겠습니다. 앱 라우터의 아키텍처는 폴더가 URL 세그먼트를 정의하는 디렉터리 기반 시스템 위에 구축됩니다. 이 폴더 내의 특수 파일들은 해당 세그먼트의 UI와 동작을 정의합니다:

이러한 구조는 React 서버 컴포넌트(RSC)의 기본 사용과 결합되어, 성능과 데이터 페칭 패턴을 크게 향상시킬 수 있는 서버 우선 접근 방식을 장려합니다. 라우트 그룹과 병렬 라우트는 이 기반 위에 구축된 고급 규칙입니다.

라우트 그룹 파헤치기: 온전함과 확장을 위한 프로젝트 구성

애플리케이션이 성장함에 따라 라우트의 수는 다루기 힘들어질 수 있습니다. 마케팅을 위한 페이지 그룹, 사용자 인증을 위한 또 다른 그룹, 그리고 핵심 애플리케이션 대시보드를 위한 세 번째 그룹이 있을 수 있습니다. 논리적으로 이들은 별개의 섹션이지만, URL을 복잡하게 만들지 않으면서 파일 시스템에서 어떻게 구성할 수 있을까요? 이것이 바로 라우트 그룹이 해결하는 문제입니다.

라우트 그룹이란?

라우트 그룹은 URL 구조에 영향을 주지 않으면서 파일과 라우트 세그먼트를 논리적 그룹으로 구성하는 메커니즘입니다. 폴더 이름을 괄호로 묶어 라우트 그룹을 생성합니다. 예를 들어 (marketing)이나 (app)과 같습니다.

괄호 안의 폴더 이름은 순전히 조직적인 목적을 위한 것입니다. Next.js는 URL 경로를 결정할 때 이 이름을 완전히 무시합니다. 예를 들어, app/(marketing)/about/page.js 파일은 /(marketing)/about이 아닌 /about URL에서 제공됩니다.

라우트 그룹의 주요 사용 사례 및 이점

단순한 구성도 이점이지만, 라우트 그룹의 진정한 힘은 애플리케이션을 고유한 공유 레이아웃을 가진 섹션으로 분할하는 능력에 있습니다.

1. 라우트 세그먼트를 위한 다양한 레이아웃 생성

이것은 가장 일반적이고 강력한 사용 사례입니다. 웹 애플리케이션에 두 개의 주요 섹션이 있다고 상상해 보십시오:

라우트 그룹이 없다면, 이러한 섹션에 다른 루트 레이아웃을 적용하는 것은 복잡할 것입니다. 라우트 그룹을 사용하면, 이는 믿을 수 없을 정도로 직관적입니다. 각 그룹 내에 고유한 layout.js 파일을 만들 수 있습니다.

이 시나리오에 대한 일반적인 파일 구조는 다음과 같습니다:

app/
├── (marketing)/
│   ├── layout.js      // 마케팅 헤더/푸터가 포함된 공개 레이아웃
│   ├── page.js        // '/'에서 렌더링됨
│   └── about/
│       └── page.js    // '/about'에서 렌더링됨
├── (app)/
│   ├── layout.js      // 사이드바가 포함된 대시보드 레이아웃
│   ├── dashboard/
│   │   └── page.js    // '/dashboard'에서 렌더링됨
│   └── settings/
│       └── page.js    // '/settings'에서 렌더링됨
└── layout.js          // 루트 레이아웃 (예: <html> 및 <body> 태그용)

이 아키텍처에서:

2. 공유 레이아웃에서 특정 세그먼트 제외하기

때로는 특정 페이지나 섹션이 상위 레이아웃에서 완전히 벗어날 필요가 있습니다. 일반적인 예로는 메인 사이트의 내비게이션이 없어야 하는 결제 프로세스나 특별 랜딩 페이지가 있습니다. 이는 상위 레이아웃을 공유하지 않는 그룹에 라우트를 배치함으로써 달성할 수 있습니다. 복잡하게 들릴 수 있지만, 이는 단순히 라우트 그룹에 루트 레이아웃의 `children`을 렌더링하지 않는 자체 최상위 layout.js를 제공하는 것을 의미합니다.

실용 예제: 다중 레이아웃 애플리케이션 구축

위에서 설명한 마케팅/앱 구조의 최소 버전을 만들어 봅시다.

1. 루트 레이아웃 (app/layout.js)

이 레이아웃은 최소한의 형태로 모든 페이지에 적용됩니다. 필수적인 HTML 구조를 정의합니다.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. 마케팅 레이아웃 (app/(marketing)/layout.js)

이 레이아웃은 공개용 헤더와 푸터를 포함합니다.

// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>마케팅 헤더</header>
      <main>{children}</main>
      <footer>마케팅 푸터</footer>
    </div>
  );
}

3. 앱 대시보드 레이아웃 (app/(app)/layout.js)

이 레이아웃은 다른 구조를 가지며, 인증된 사용자를 위한 사이드바를 특징으로 합니다.

// app/(app)/layout.js
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
        대시보드 사이드바
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>{children}</main>
    </div>
  );
}

이 구조를 사용하면, /about으로 이동하면 `MarketingLayout`으로 페이지가 렌더링되고, /dashboard로 이동하면 `AppLayout`으로 렌더링됩니다. URL은 깨끗하고 의미론적으로 유지되면서, 우리 프로젝트의 파일 구조는 완벽하게 정리되고 확장 가능해집니다.

병렬 라우트로 동적 UI 잠금 해제하기

라우트 그룹이 애플리케이션의 개별 섹션을 구성하는 데 도움이 되는 반면, 병렬 라우트는 다른 문제를 해결합니다: 단일 레이아웃 내에서 여러 독립적인 페이지 뷰를 표시하는 것입니다. 이는 복잡한 대시보드, 소셜 미디어 피드 또는 다른 패널들이 동시에 렌더링되고 관리되어야 하는 모든 UI에서 일반적인 요구 사항입니다.

병렬 라우트란?

병렬 라우트를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 렌더링할 수 있습니다. 이러한 라우트는 슬롯(slots)이라는 특별한 폴더 규칙을 사용하여 정의됩니다. 슬롯은 @folderName 구문을 사용하여 생성됩니다. 이들은 URL 구조의 일부가 아니며, 대신 가장 가까운 공유 상위 `layout.js` 파일에 props로 자동 전달됩니다.

예를 들어, 팀 활동 피드와 분석 차트를 나란히 표시해야 하는 레이아웃이 있다면, `@team`과 `@analytics`라는 두 개의 슬롯을 정의할 수 있습니다.

핵심 아이디어: 슬롯(Slots)

슬롯을 레이아웃의 이름 있는 플레이스홀더라고 생각하십시오. 레이아웃 파일은 이러한 슬롯을 props로 명시적으로 받아들이고 어디에 렌더링할지 결정합니다.

다음 레이아웃 컴포넌트를 고려해 보십시오:

// 'team'과 'analytics' 두 개의 슬롯을 받는 레이아웃
export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {team}
        {analytics}
      </div>
    </div>
  );
}

여기서 `children`, `team`, `analytics`는 모두 슬롯입니다. `children`은 디렉터리의 표준 `page.js`에 해당하는 암시적 슬롯입니다. `team`과 `analytics`는 파일 시스템에서 `@` 접두사로 생성해야 하는 명시적 슬롯입니다.

주요 기능 및 장점

실제 시나리오: 복잡한 대시보드 구축

URL /dashboard에 대시보드를 디자인해 봅시다. 이 대시보드에는 메인 콘텐츠 영역, 팀 활동 패널, 그리고 성능 분석 패널이 있을 것입니다.

파일 구조:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // analytics 슬롯을 위한 UI
    │   └── loading.js     // analytics를 위한 로딩 UI
    ├── @team/
    │   └── page.js          // team 슬롯을 위한 UI
    ├── layout.js            // 슬롯들을 조율하는 레이아웃
    └── page.js              // 암시적 'children' 슬롯 (메인 콘텐츠)

1. 대시보드 레이아웃 (app/dashboard/layout.js)

이 레이아웃은 세 개의 슬롯을 받아 배열합니다.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  const isLoggedIn = true; // 실제 인증 로직으로 대체하세요

  return isLoggedIn ? (
    <div>
      <h1>메인 대시보드</h1>
      {children}
      <div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ border: '1px solid blue', padding: '10px' }}>
          <h2>팀 활동</h2>
          {team}
        </div>
        <div style={{ border: '1px solid green', padding: '10px' }}>
          <h2>성능 분석</h2>
          {analytics}
        </div>
      </div>
    </div>
  ) : (
    <div>대시보드를 보려면 로그인하세요.</div>
  );
}

2. 슬롯 페이지 (예: app/dashboard/@analytics/page.js)

각 슬롯의 `page.js` 파일은 해당 특정 패널의 UI를 포함합니다.

// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
  // 네트워크 요청 시뮬레이션
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { views: '1.2M', revenue: '$50,000' };
}

export default async function AnalyticsPage() {
  const data = await getAnalyticsData();
  return (
    <div>
      <p>페이지 뷰: {data.views}</p>
      <p>수익: {data.revenue}</p>
    </div>
  );
}

// app/dashboard/@analytics/loading.js
export default function Loading() {
  return <p>분석 데이터를 로딩 중입니다...</p>;
}

이 설정으로, 사용자가 /dashboard로 이동하면 Next.js는 `DashboardLayout`을 렌더링합니다. 이 레이아웃은 dashboard/page.js, dashboard/@team/page.js, dashboard/@analytics/page.js에서 렌더링된 콘텐츠를 props로 받아 적절하게 배치합니다. 결정적으로, 분석 패널은 대시보드의 나머지 부분 렌더링을 차단하지 않고 3초 동안 자체 `loading.js` 상태를 표시합니다.

default.js로 일치하지 않는 라우트 처리하기

중요한 질문이 생깁니다: Next.js가 현재 URL에 대한 슬롯의 활성 상태를 가져올 수 없다면 어떻게 될까요? 예를 들어, 초기 로드나 페이지 새로고침 시 URL이 /dashboard일 수 있는데, 이는 @team이나 @analytics 슬롯 내부에 무엇을 보여줘야 할지에 대한 구체적인 지침을 제공하지 않습니다. 기본적으로 Next.js는 404 오류를 렌더링할 것입니다.

이를 방지하기 위해, 병렬 라우트 내에 default.js 파일을 생성하여 대체 UI를 제공할 수 있습니다.

예시:

// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
  return (
    <div>
      <p>선택된 분석 데이터가 없습니다.</p>
    </div>
  );
}

이제 분석 슬롯이 일치하지 않으면, Next.js는 404 페이지 대신 `default.js`의 콘텐츠를 렌더링합니다. 이는 특히 복잡한 병렬 라우트 설정의 초기 로드 시 부드러운 사용자 경험을 만드는 데 필수적입니다.

고급 아키텍처를 위한 라우트 그룹과 병렬 라우트 결합

앱 라우터의 진정한 힘은 그 기능들을 결합할 때 실현됩니다. 라우트 그룹과 병렬 라우트는 정교하고 매우 체계적인 애플리케이션 아키텍처를 만들기 위해 아름답게 함께 작동합니다.

사용 사례: 다중 모달 콘텐츠 뷰어

사용자가 항목을 보면서 배경 페이지의 컨텍스트를 잃지 않고 세부 정보를 보기 위해 모달 창을 열 수 있는 미디어 갤러리나 문서 뷰어와 같은 플랫폼을 상상해 보십시오. 이는 종종 "가로채기 라우트(Intercepting Route)"라고 불리며 병렬 라우트를 기반으로 구축된 강력한 패턴입니다.

사진 갤러리를 만들어 봅시다. 사진을 클릭하면 모달에서 열립니다. 하지만 페이지를 새로고침하거나 사진의 URL로 직접 이동하면 해당 사진을 위한 전용 페이지가 표시되어야 합니다.

파일 구조:

app/
├── @modal/(..)(..)photos/[id]/page.js  // 모달을 위한 가로채기 라우트
├── photos/
│   └── [id]/
│       └── page.js                  // 전용 사진 페이지
├── layout.js                        // @modal 슬롯을 받는 루트 레이아웃
└── page.js                          // 메인 갤러리 페이지

설명:

이 패턴은 병렬 라우트(@modal 슬롯)와 고급 라우팅 규칙을 결합하여 수동으로 구현하기 매우 복잡했을 매끄러운 사용자 경험을 만듭니다.

모범 사례 및 일반적인 함정

라우트 그룹 모범 사례

병렬 라우트 모범 사례

피해야 할 일반적인 함정

결론: 웹 애플리케이션의 미래 구축

라우트 그룹 및 병렬 라우트와 같은 기능을 갖춘 Next.js 앱 라우터는 현대 웹 개발을 위한 견고하고 확장 가능한 기반을 제공합니다. 라우트 그룹은 URL 의미 체계를 손상시키지 않으면서 코드를 구성하고 고유한 레이아웃을 적용하기 위한 우아한 해결책을 제공합니다. 병렬 라우트는 독립적인 상태를 가진 동적, 다중 패널 인터페이스를 구축할 수 있는 능력을 잠금 해제하며, 이는 이전에는 복잡한 클라이언트 측 상태 관리를 통해서만 달성할 수 있었습니다.

이러한 강력한 아키텍처 패턴을 이해하고 결합함으로써, 여러분은 단순한 웹사이트를 넘어 오늘날 사용자의 요구를 충족시키는 정교하고 성능이 뛰어나며 유지보수 가능한 애플리케이션을 구축하기 시작할 수 있습니다. 학습 곡선은 기존의 페이지 라우터보다 가파를 수 있지만, 애플리케이션 아키텍처와 사용자 경험 측면에서의 보상은 엄청납니다. 다음 프로젝트에서 이러한 개념들을 실험해보고 Next.js의 모든 잠재력을 발휘해 보십시오.