[Routing] Next / Parallel Routes, 인터셉팅 라우트 - 병렬 라우트, 인터셉팅 라우트

병렬 Route

병렬 라우트를 사용하면 독립적으로 탐색할 수 있는 하나 이상의 페이지를 동일한 화면에서 동시에 렌더링할 수 있습니다. 소셜 사이트의 대시보드 및 피드와 같이 앱에서 매우 동적인 섹션의 경우 병렬 라우트를 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다.

규칙
병렬 라우트는 명명된 slots을 사용하여 생성됩니다. 슬롯은 @folder 규칙으로 정의됩니다.

예를 들어, 다음 파일 구조는 비디오 분석 대시보드에 대한 두 개의 명시적 슬롯, 즉 @audience와 @views를 정의합니다:

위의 폴더 구조는 이제 /dashboard/layout.js 컴포넌트에서 @audience 및 @views 슬롯을 prop으로 받아들이고 children prop과 함께 병렬로 렌더링할 수 있다는 의미입니다:

function AudienceNav() {
  return <nav>...</nav>;
}

function ViewsNav() {
  return <nav>...</nav>;
}

export default function Layout({
  children,
  audience,
  views,
}: {
  children: React.ReactNode;
  audience: React.ReactNode;
  views: React.ReactNode;
}) {
  return (
    <>
      <h1>Tab Bar Layout</h1>
      {children}

      <h2>Audience</h2>
      <AudienceNav />
      {audience}

      <h2>Views</h2>
      <ViewsNav />
      {views}
    </>
  );
}

알아두면 좋습니다:

children prop은 폴더에 매핑할 필요가 없는 암시적 slot입니다. 즉, dashboard/page.js는 dashboard/@children/page.js 와 동일합니다.

 

동작

URL
슬롯은 URL 구조에 영향을 주지 않습니다. dashboard/@audience/subscribers 파일 경로는 /dashboard/subscribers 액세스할 수 있습니다.

Navigation
앞뒤로 탐색할 때(소프트 탐색 사용) URL이 업데이트되고 브라우저는 이전에 활성화된 슬롯을 복원합니다.

예를 들어, 사용자가 /dashboard/subscribers로 이동한 다음 /dashboard/impressions로 이동하는 경우, 다시 이동할 때 URL이 dashboard/subscribers로 업데이트됩니다.

 

default.js

새로 고침(또는 하드 탐색) 시 브라우저는 현재 URL과 일치하는 슬롯을 렌더링하지만 어떤 다른 병렬 슬롯이 활성화되었는지 알 수 없습니다.

브라우저가 이전 상태를 복원할 수 없을 때 대체로 렌더링할 default.js 파일을 정의할 수 있습니다.

 

조건부 라우트

병렬 라우트를 사용하여 조건부 라우팅을 구현할 수 있습니다. 예를 들어 현재 사용자 유형에 따라 @user 및 @team 경로를 렌더링할 수 있습니다:

import { getCurrentUserType } from 'lib/user';

export default async function Layout({
  children,
  user,
  team,
}: {
  children: React.ReactNode;
  user: React.ReactNode;
  team: React.ReactNode;
}) {
  const userType: 'user' | 'team' = getCurrentUserType();

  return (
    <>
      {/* Render the user or team slot depending on the current user type */}
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

 

라우트 인터셉팅

라우트를 가로채면 브라우저 URL을 마스킹하면서 현재 레이아웃 내에서 새 경로를 로드할 수 있으므로 현재 페이지의 컨텍스트를 유지하는 것이 중요할 때 유용합니다. 예를 들어 하나의 작업을 편집하는 동안 모든 작업을 보거나 사이드 모달에서 카트를 열거나 피드에서 사진을 펼칠 수 있습니다.

규칙
상대 경로 ../와 유사하게 (..) 규칙을 사용하여 인터셉터 라우트를 정의할 수 있습니다. (...) 규칙을 사용하여 app 디렉터리를 기준으로 경로를 만들 수도 있습니다.

위의 예에서 사용자 피드에서 사진을 클릭하면 클라이언트 측 탐색을 사용하여 사진이 열립니다. 그러나 페이지를 새로 고치거나 공유하면 기본 레이아웃 및 페이지로 사진이 로드됩니다.

 

모달

인터셉팅 라우트를 병렬 라우트와 함께 사용하여 모달을 만들 수 있습니다.

모달을 만들 때 다음과 같은 몇 가지 일반적인 문제를 알고 있어야 하는 경우가 많습니다:

• URL을 통해 모달에 액세스할 수 없음
• 페이지가 새로고침될 때 모달이 닫힘
• 뒤로 네비게이팅 할때 모달이 뜬 페이지의 라우트가 아닌(모달이 닫히는게아닌) 모달이 뜨기 이전 경로로 이동하는 뒤로 탐색.
• 모달을 다시 열지 않는 앞으로 탐색. (모달은 라우팅에 포함이안됨)

라우트를 인터셉팅하면 URL을 통해 모달 콘텐츠를 공유할 수 있도록 하고, 페이지를 새로 고칠 때 컨텍스트가 손실되지 않도록 하며, 뒤로 및 앞으로 탐색을 통해 모달을 닫았다가 다시 여는 등 모달을 만들 때 발생할 수 있는 문제를 해결할 수 있습니다.

위의 예에서 product 페이지에서 cart 버튼을 클릭하면 카트가 모달로 열립니다. 그러나 카트는 결제 시와 같이 고유한 경로와 레이아웃에서도 액세스할 수 있습니다.