App Router (13) - Parallel Route

2026.10.06 · 2분 읽기 · 조회 0

병렬 라우트

하나의 화면 안에 여러개의 페이지를 병렬로 렌더링시켜주는 패턴이다.
소셜 미디어나 관리자 대시보드처럼 한 화면에 여러 영역이 함께 구성되는 서비스에 잘 활용된다.

병렬 라우트를 위해선 슬롯이라는 것을 만들어주어야 한다.

슬롯이란 병렬로 렌더링될 페이지 컴포넌트를 보관하는 폴더이다. @이름 이렇게 폴더명을 지으면 된다.

내부에 page.tsx 파일을 만들어준다. 해당 페이지는 @sidebar 폴더와 같은 위치에 있는 layout.tsx의 Props로 들어가게 된다.

// layout.tsx
 
export default function Layout({ sidebar } : {sidebar : ReactNode}){
  return <div>{sidebar}</div>
}

다음과 같이 꺼내어 사용할 수 있다.

// layout.tsx
 
export default function Layout({ sidebar, children }){
  return <div>{sidebar} {children}</div>
}

이렇게 레이아웃에서 동시에 꺼내주면 병렬 라우팅이 된다.

하나의 화면에 두 개의 페이지 컴포넌트를 병렬로 렌더링해준다. @sidebar 처럼 슬롯으로 된 폴더는 라우팅 그룹 폴더 처럼 url 경로에 영향을 미치지 않는다.

슬롯은 개수 제한이 없으므로 몇 개를 만들어도 상관없다.

전체 화면
├── 메인 콘텐츠
├── 사이드바
├── 피드
└── 메뉴

이를 이용하면 화면을 영역별로 나누어 관리할 수 있다.

슬롯 내부 하위 페이지

슬롯 내부에도 하위 폴더와 page.tsx를 추가할 수 있다.
parallel/@feed 폴더 내부에 setting 폴더를 만들면 parallel/setting 경로로 들어가면 해당 페이지가 뜬다.
이때 다른 슬롯 페이지들은 유지되고 해당 @sidebar 부분만 하위 페이지로 변경된다.

/parallel
    ├── children  : 메인 콘텐츠
    ├── sidebar   : 사이드바
    └── feed      : 기본 피드
 
/parallel/setting
    ├── children  : 메인 콘텐츠 유지
    ├── sidebar   : 사이드바 유지
    └── feed      : 설정 화면으로 교체

이때 다른 슬롯 페이지들이 유지되는 것은 Next.js가 각 슬롯의 이전 페이지들을 기억하기 때문인데, 새로고침을 하면 기록이 사라져 404가 뜬다.

default.tsx

그런 상황에 사용할 기폰 페이지는 default.tsx 파일을 만들어 지정해준다.

parallel
├── page.tsx
├── layout.tsx
├── @sidebar
│   ├── page.tsx
│   └── default.tsx
└── @feed
    ├── page.tsx
    └── default.tsx

이렇게 설정해주면 새로고침 시에도 또는 해당 슬롯에 적절한 페이지가 없을 때 대신 기본값으로 렌더링 된다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글