[Next] Parallel Routes

Parallel Routes란

Parallel Routes는 Next.js에서 하나의 레이아웃 내에 여러 개의 페이지를 동시에 렌더링할 수 있게 해주는 기능입니다. 전통적인 라우팅 방식이 페이지 전체를 교체하는 것과 달리, Parallel Routes는 페이지의 특정 섹션만 독립적으로 로드하거나 업데이트할 수 있습니다.

이 기능은 복잡한 대시보드나 UI를 구성할 때 특히 유용합니다. 페이지의 각 부분을 분리하여 관리하고, 사용자가 상호작용하는 부분만 동적으로 업데이트함으로써 전반적인 성능과 사용자 경험을 향상시킬 수 있습니다.

 

---

 

 

작동 방식 ⚙️

Parallel Routes는 @ 기호로 시작하는 특별한 폴더, 즉 **'슬롯(slots)'**을 만들어 정의합니다. 각 슬롯은 독립적으로 렌더링되는 UI 컴포넌트를 나타냅니다.

예를 들어, 대시보드에 사용자 프로필과 통계 차트가 동시에 보이는 구조를 만들고 싶다면, 다음과 같은 폴더 구조를 사용할 수 있습니다.

/app
├── dashboard/
│   ├── @user/
│   │   ├── page.tsx      // 사용자 프로필 컴포넌트
│   ├── @analytics/
│   │   ├── page.tsx    // 통계 차트 컴포넌트
│   ├── layout.tsx      // 메인 대시보드 레이아웃
├── page.tsx          

이 구조에서 dashboard/layout.tsx 파일은 @user와 @analytics 슬롯을 **props**로 받아서 원하는 위치에 렌더링합니다.

주요 활용 사례 ✨

• 대시보드: 가장 일반적인 사용 사례입니다. 최근 활동, 사용자 목록, 차트 등 여러 독립적인 섹션을 하나의 페이지에 보여줄 때 유용합니다.
• 영구적인 UI: 음악 플레이어나 채팅 위젯처럼 사용자가 페이지를 이동해도 계속해서 보이는 UI 요소를 만들 수 있습니다.
• 조건부 렌더링: 사용자의 역할(예: 관리자 vs. 일반 사용자)에 따라 다른 슬롯을 조건부로 렌더링할 수 있습니다.

---

코드 구현 예시 💻

Parallel Routes의 핵심은 부모 layout.tsx 파일에서 슬롯을 props로 받아 렌더링하는 것입니다.

JavaScript

 

// app/dashboard/layout.tsx

export default function DashboardLayout({
  children,
  user,
  analytics,
}: {
  children: React.ReactNode;
  user: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <div>
      <div className="flex">
        {user}        {/* @user/page.tsx의 콘텐츠를 렌더링 */}
        {analytics}   {/* @analytics/page.tsx의 콘텐츠를 렌더링 */}
      </div>
      <div className="main-content">
        {children}    {/* /dashboard/settings와 같은 메인 라우트의 콘텐츠를 렌더링 */}
      </div>
    </div>
  );
}

이 설정을 통해 모든 슬롯(@user, @analytics)과 메인 콘텐츠(children)가 동일한 레이아웃 내에서 동시에 렌더링됩니다. 이는 관심사를 명확히 분리하고 더 나은 사용자 경험을 제공하는 효과적인 방법입니다.