[3주 차] Parallel Routes

병렬 라우팅(Parallel Routing)은 동시에 또는 조건에 따라 동일한 레이아웃에서 하나 이상의 페이지를 렌더링할 수 있게 해준다. 대시보드나 소셜 사이트의 피드와 같은 매우 동적인 앱 섹션에서는 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있다.

 

로딩 및 오류 UI

병렬 라우팅을 사용하면 독립적으로 스트리밍되는 각 경로에 대해 독립적인 오류 및 로드 상태를 정의할 수 있다.

 

조건 경로

병렬 라우팅은 인증 상태와 같은 특정 조건에 따라 슬롯을 조건부로 렌더링할 수 있도록 해준다. 이를 통해 동일한 URL에서 완전히 분리된 코드를 사용할 수 있게 된다.

 

컨벤션

병렬 라우트는 명명된 슬롯(named slots)을 사용하여 생성된다. 슬롯은 @folder 컨벤션으로 정의되며, 같은 수준의 세그먼트의 레이아웃으로 props로 전달된다. @folder 아래와 같은 수준의 세그먼트 폴더 아래에는 default.tsx를 항상 생성하는 것이 좋다.

import React, { ReactNode } from "react";

type Props = {
  children: ReactNode;
  first: ReactNode;
  second: ReactNode;
};

const ParallelRoutesLayout = (props: Props) => {
  const { children, first, second } = props;

  return (
    <div>
      ParallelRoutesLayout {children} {first} {second}
    </div>
  );
};

export default ParallelRoutesLayout;

const Default = () => {
  return null;
};

export default Default;