Next.js 고급 라우팅 기법 - Parallel Routes,Intercepting Routes

유연한 페이지 렌더링을 위해 Parallel Routes(병렬 라우트) 와 Intercepting Routes(인터셉트 라우트) 라는 고급 라우팅 기술을 제공한다.
이 기술을 활용하면 여러 개의 페이지를 병렬로 렌더링하거나, 기존의 URL 구조를 변경하지 않고 특정 페이지를 가로채서 원하는 방식으로 렌더링할 수 있다.

 

1. Parallel Routes (병렬 라우트)

Parallel Routes는 여러 개의 페이지(컴포넌트)를 동시에 렌더링할 수 있도록 지원하는 라우팅 방식이다.
일반적으로 Next.js에서는 특정 페이지를 렌더링할 때 단일 페이지 구조를 따르지만, Parallel Routes를 사용하면 한 페이지에서 여러 개의 레이아웃을 동적으로 구성할 수 있다.

이 기능은 대시보드, 관리 페이지, 챗봇 UI 등 독립적인 여러 패널을 동시에 렌더링할 때 유용하다.즉 한 화면에 여러가지를 보여줘야하는 경우에 사용가능할 것 같다.

 

다음과 같은 폴더 구조로 생성하여 사용한다.

 

/app
│── layout.tsx
│── page.tsx
│── @sidebar
│   ├── layout.tsx
│   ├── page.tsx
│── @content
│   ├── layout.tsx
│   ├── page.tsx

 

@를 붙여주면 병렬적으로 렌더링 할 영역을 표시하는 것이다.

 

2. Intercepting Routes (인터셉트 라우트)

인터셉터 라우트는 URL 구조를 변경하지 않고 특정 페이지를 가로채서 새로운 방식으로 렌더링할 수 있도록 도와주는 라우팅 기법이다. 예를 들어, 모달 창을 띄우는 경우 일반적으로 새로운 페이지로 이동하는 방식을 사용하지만, Intercepting Routes를 사용하면 모달을 열 때 현재 URL을 유지한 채 내부적으로 다른 페이지를 렌더링할 수 있다.

 

 

다음과 같은 구조가 있다고하자

/app
│── layout.tsx
│── page.tsx
│── profile
│   ├── page.tsx
│── (profile)
│   ├── page.tsx

 

 

• profile/page.tsx → 기존 프로필 페이지
• (profile)/page.tsx → 다른 경로에서 /profile을 인터셉트하여 모달로 렌더링

---

해당 라우팅 기법들을 써야하는 이유를 정리해보자.

일단 그 동안 단일 페이지에서 모든 UI를 보여주다가 모달창 같은 걸로 다른 UI를 표시하려고했다.

 

화면에서 바뀌는 부분이 있다는 것은 리렌더링이 일어났다는 것이고, 그 동안 리렌더링을 방지하기 위해 여러 기법을 사용해왔다.

독립적인 UI를 유지시키는 것이 위와 같은 고급 라우팅 기법 사용의 이유라고 생각한다. 병렬 라우팅의 사용은 이와 같은 이유에서 사용하는거라고 할 수 있다.

 

인터셉트 라우트는 이해하기 더 어려웠다.

대시보드 페이지에서 프로필을 본다고 가정하자, /dashboard라는 페이지에서 /profile이라는 페이지로 넘어가면 /dashboard 페이지의 상태는 유지되지않는다. 인터셉터 라우팅은 /(profile)/page.tsx 처럼 렌더링되어 마치 모달처럼 보여지게된다.

...