개발

[NextJS] Next.js 앱 라우터의 인터셉트, 병렬 라우트

2023년 12월 12일 발행읽는 시간 8분

#들어가며

이번 포스팅에서는 앱 라우터의 두 가지 기능을 알아본다. Parallel Routes와 Intercepting Routes 에 대해 알아보고 어떻게 활용할 수 있는지 알아보자.

데모 앱

#Parallel Routes

병렬 라우트의 공식문서

병렬 라우트를 사용하면, 동일한 view에서 하나 이상의 페이지를 동시에 or 조건부로 렌더링 할 수 있다.

공식 문서의 예로 team 페이지와 analytics 페이지를 동시에 같은 레벨의 layout.js 에 띄울 수 있다고 한다. 그리고 각각의 loading과 error도 설정할 수 있다.

#사용 방법

병렬 라우트는 애플리케이션에 명명된 슬롯을 생성하여 사용할 수 있다. 폴더를 생성할 때 폴더명 앞에 @를 붙여서 사용한다. 이 폴더는 경로에 (_(private folder)나 (폴더그룹) 처럼) 감지되지 않는다.

이렇게 생성한 폴더는 동일한 레벨의 layout 에서 props로 받아서 사용이 가능하다.

병렬 경로를 사용할 때는 default.js를 사용하는 것이 중요하다. 이 파일은 경로가 일치하지 않을 때 무엇을 렌더링할지 알려주는 역할을 한다.

홈페이지 / 경로에 있다고 생각해보자. @parallel 에서 / 에 대한 인터셉트 라우트가 없기 때문에 default.tsx 가 없다면 404 에러가 발생할 것이다.

default 를 생성하지 않고 해결하기 위해서는 그냥 @parallel의 root에 page.tsx를 생성 해주면 될 줄 알았지만? 제대로 동작하지 않는 것 같더라.. (.) 폴더를 생성한 뒤에 그 안에 page.tsx 를 작성해주면 경로가 / 일 때의 인터셉트 라우트가 있기 때문에 404 NotFound 가 발생하지 않는다. 하지만 이 방법보단 default를 사용하는 것이 다른 페이지가 더 생겼을 때를 생각하면 더 올바른 방법이라고 생각한다.

#Intercepting Routes

인터셉팅 라우트의 공식문서

기본 개념

인터셉팅 라우트를 사용하면 현재 레이아웃 내에서 애플리케이션의 다른 부분을 로드하면서 현재 페이지의 컨텍스트를 유지할 수 있다. 쉽게 말해, /feed에서 사진을 클릭했을 때, 사진을 모달로 표시해서 /feed 페이지 위에 오버레이 할 수 있다.

URL 마스킹과 경로 가로채기

이 과정에서 Next.js는 /photo/123 경로를 가로채서 URL을 마스킹한다. 즉, 사용자는 /photo/123 에 있다고 생각할 수 있지만, 실제로는 /feed 페이지의 컨텍스트를 유지한 상태에서 모달을 보고 있다.(실제로 URL도 변경됨)

다이렉트 URL 접근과 경로 차단 방지

사용자가 URL을 통해 직접 /photo/123에 접근하는 경우에는, 인터셉팅 라우트가 아닌 실제 /photo/123 페이지가 전체 페이지로 렌더링 돼야 한다. 이는 사용자가 페이지를 새로 고침 하거나 공유가능한 URL을 클릭했을 때, 모달 대신 전체 페이지가 보여지도록 하는 것이다.

경로 차단이 발생하지 않아야 한다는 말은, 사용자가 집접 해당 URL로 접근했을 때 인터셉팅 라우트에 의해 방해받지 않고, 실제 해당 경로의 페이지로 이동할 수 있어야함을 의미한다. intercepting routes와 일반 경로 두 가지 모두 존재해야 한다는 의미인것 같다(?).

#사용 방법

Next.js 인터셉팅 라우트를 사용하려면 폴더에서 (..) 명명 규칙을 사용하여 경로 세그먼트를 일치시킬 수 있다. 폴더 상대 경로와 동일하게 생각하면 될 것 같다.

(.)를 사용하여 같은 레벨의 세그먼트를 일치
(..)는 한 단계 위의 세그먼트를 일치
(..)(..)는 두 수준 위의 세그먼트를 일치
(...)를 사용하여 루트 앱 디렉터리의 세그먼트와 일치

#모달 구현

위 두 가지 앱라우터의 기능을 활용해서 모달을 만들면 모달로 작업할 때 흔히 발생하는 몇 가지 문제를 해결할 수 있다.

URL을 통해 모달 콘텐츠 공유 가능
페이지가 새로 고쳐질 때 모달을 닫는 대신 컨텍스트 유지
모달이 열린 상태에서 뒤로 가기를 누르면 이전 경로로 이동하지 않고 모달을 닫을 수 있음
앞으로 가기 시 모달 다시 열 수 있음

#마치며

이번 포스팅을 통해 Next.js 13.3에서 새롭게 등장한 Parallel Routes와 Intercepting Routes의 기능을 살펴보고, 이를 활용하여 모달을 구현하는 과정을 알아봤다. 두 기능 모두 쓰임새도 많아보이고, 사용자 경험을 향상시킬 수 있는 방법이 될 것 같다. Intercepting Routes는 사용자가 동일한 페이지 내에서 다른 콘텐츠로 자연스럽게 이동할 수 있도록 하며, Parallel Routes는 하나의 뷰에서 여러 페이지를 동시에 또는 조건부로 표시할 수 있었다.

물론, Next14 버전인 지금도 @ 폴더 변경 시 .next 폴더를 삭제해야 하는 등의 불안정성이 여전히 존재하더라.. 하지만, 이러한 소소한 문제점들에도 불구하고 굉장히 편리하게 사용할 수 있었고 강력한 기능이라고 생각한다.