고급 라우팅 1: 병렬 라우트 (Parallel Routes)

병렬 라우트(Parallel Routes)는 이름이 @로 시작하는 폴더(Slots)를 사용하여, 여러 페이지를 하나의 레이아웃 안에서 동시에 렌더링하는 기법입니다.

이를 활용하면 대시보드의 네비게이션, 사용자 정보 위젯, 실시간 통계 차트 등 서로 독립적인 데이터를 가진 화면 조각들을 각기 다른 속도로 비동기 로딩할 수 있으며, 코드 응집도를 비약적으로 높일 수 있습니다.

// ==========================================
// 📂 app/dashboard/layout.tsx
// 병렬 라우트는 layout 함수의 props로 자동으로 주입됩니다!
// ==========================================
export default function DashboardLayout({
  children,   // 기본 app/dashboard/page.tsx
  analytics,  // app/dashboard/@analytics/page.tsx
  team,       // app/dashboard/@team/page.tsx
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div className="flex flex-col gap-6 p-6">
      <header className="bg-slate-800 p-4 rounded-xl">
        {/* 공통 헤더나 제목을 배치하는 children 영역 */}
        {children}
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 두 컴포넌트가 병렬로(독립적으로) 데이터를 Fetching하고 렌더링됩니다. */}
        {/* 둘 중 하나가 느려도 다른 하나는 먼저 화면에 표시될 수 있습니다. */}
        <section className="border border-purple-500/30 bg-purple-500/5 rounded-xl p-4">
          <h2 className="text-purple-400 font-bold mb-4">Analytics Slot</h2>
          {analytics}
        </section>

        <section className="border border-emerald-500/30 bg-emerald-500/5 rounded-xl p-4">
          <h2 className="text-emerald-400 font-bold mb-4">Team Slot</h2>
          {team}
        </section>
      </div>
    </div>
  )
}