1. 개요

하나의 화면에 여러개의 페이지를 병렬로 랜더링 시켜주는 패턴

고급 라우팅 패턴 중 하나로 sidebar 나 feed 등 여러 페이지(page.tsx에 작성되는 페이지 컴포넌트)를 병렬로 랜더링 시켜준다.

소셜네트워크나 대시보드 등에 구축

2. 사용법

1) 세팅하기

1. parallel 폴더를 만들어준다.
2. 폴더 내 layout과 page를 만들어준다.
3. parallel 폴더 아래 슬롯을 만들어줘야한다.
   • 슬롯은 '@이름'으로 만들어준다.
   • 병렬로 랜더링될 페이지 컴포넌트를 보관하는 폴더
   • 슬롯 내 페이지 컴포넌트는 부모의 레이아웃 컴포넌트에 props로 자동 전달
4. 부모의 layout 컴포넌트에는 children과 같이 설정한 슬롯의 이름을 받아올 수 있다.
   layout.tsx

import { ReactNode } from 'react'

export default function Layout({
    children, sidebar
}:{
    children:ReactNode;
    sidebar:ReactNode;
}) {
    return (
        <div>
            {sidebar}
            {children}
        </div>
    )
}

sidebar와 children이 병렬로 연결되어있다.
슬롯의 제한은 없다.

폴더 구조(예시)

parallel(폴더)
ㄴ @sidebar - page.tsx

• layout.tsx
• page.tsx

2) 슬롯 내 새로운 페이지 추가

폴더구조(예시)

parallel(폴더)
ㄴ @sidebar
ㄴ @setting
- page.tsx
- page.tsx
ㄴ @feed
- page.tsx
- default.tsx

• layout.tsx
• page.tsx
• default.tsx

1. @setting 폴더를 슬롯 안에 만든다.
2. setting 폴더 내 page.tsx 컴포넌트를 만들어준다.
3. /parallel/setting 경로로 이동한다면 setting 폴더 내의 page.tsx가 랜더링된다.
   • setting 폴더가 없는 슬롯은 404 not found가 되어야하지만 next에서는 이전의 페이지를 유지한다.
4. link 컴포넌트를 이용해 클라이언트 사이드 랜더링 방식으로 이동할 때만 가능
   • 초기접속에서 주소로 바로 /parallel/setting 접속해서 들어가면 슬롯의 이전값을 찾을 수 없기 때문에 404 페이지가 나타난다.
5. 위 문제를 해결하기 위해 default 페이지를 만든다. (children 페이지에도 추가)