[Next.js] Parallel Routes

카테고리 : Development
태그: Parallel Routes · 병렬 라우트
등록일: 2023년 12월 14일
최근 업데이트: 2023년 12월 16일

---

• 1. Parallel Routes
  • 1) 사용 예시
  • 2) 얻을 수 있는 결과

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. 각 페이지의 로딩 상태와 에러 상태를 분리하여 관리가능