Parallel Routes

Parallel Routes

1. Parallel Routes

  • 여러개의 페이지를 렌더링을 동시에 할 수 있도록 하는 기능
  • ex) 로그인 팝업창,대시보드 및 소셜 사이트의 피드와 같은 동적인 앱 등

1) 사용 예시

@로 시작하는 폴더 컨벤션을 갖고 있어서, @폴더이름 내부에 page.js를 만들어주면 Parallel Routing을 사용할 수 있다.

  • 모달을 띄우기 위해 @modal 폴더 안에 page.tsx를 만들어서 해당 로그인 팝업을 구현했다

  • 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링이 필요

  • 예를 들어 동일한 레이아웃을 할당한 슬롯에 같은 props가 전달되어야한다

import { container } from "./main.css";
import { ReactNode } from "react";
 
type Props = { children: ReactNode; modal: ReactNode };
export default function Layout({ children, modal }: Props) {
  return (
    <div className={container}>
      {children}
      {modal}
    </div>
  );
}

2) 얻을 수 있는 결과

  1. 조건부 경로가 구현이 가능해짐 ex)로그인 전의 상태 , 또는 로그인 후의 상태
  1. 내부 컴포넌트의 복잡한 분기처리를 줄여줌
  2. 각 페이지의 로딩 상태와 에러 상태를 분리하여 관리가능
Parallel Routes