[Next.js]Routing - Parallel Routes & Intercepting Routes
병렬 라우트(Parallel Routes) 는 동일한 레이아웃 안에서 동시에 혹은 조건부로 하나 이상의 페이지를 렌더링할 수 있다. 이 방법은 대시보드, 소셜 사이트 피드와 같이 동적인 앱에서 활용도가 매우 높다.
Slots
Parallel Routes는 slots라는 이름으로 생성됩니다. Slots는 @folder 규칙으로 정의되는데 예를 들어, 다음 파일 구조는 두 개의 slots인 @analytics와 @team을 정의한다.
Slots는 공유된 부모 레이아웃에 props로 전달된다. 위의 예에서는 app/layout.js의 컴포넌트가 이제 @analytics 및 @team slots props를 받아들이고, children prop과 함께 병렬로 렌더링할 수 있다.
slots는 route segments가 아니며 URL 구조에 영향을 미치지 않는다.
export default function Layout({
children,
team,
analytics,
}: {
children: React.ReactNode
analytics: React.ReactNode
team: React.ReactNode
}) {
return (
<>
{children}
{team}
{analytics}
</>
)
}useSelectedLayoutSegment(s)
useSelectedLayoutSegment 및 useSelectedLayoutSegments는 parallelRoutesKey 매개변수를 받아 slot 내의 활성 라우트 세그먼트를 읽을 수 있게 한다.
출처 : https://growing-jiwoo.tistory.com/128
Intercepting Routes
현재 레이아웃에 다른 Routing 컴포넌트를 불러오는 것이다. 사용자가 현재 컨텍스트에서 벗어나지 않으면서도 다른 화면을 보여주는 데 유용하다(ex. 모달창, 확인창)
공식문서의 예시는 인스타그램같은 피드가 /feed 이고 어떤 사진을 보여주는 모달창은 /photo/123 일 경우를 들고 있다. /feed 컨텍스트 내에서 /photo/123 에서 보여줄 모달창을 보여주고 싶은 상황인 것이다.
(출처: https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes)
파일 시스템 내에선 괄호 안에 넣는 . 의 갯수에 따라 어떤 라우팅을 Intercept 할지 정하는데 그 규칙은 다음과 같다.
(.) 은 같은 레벨에 같은 이름 Route 를 Intercept 한다.
(..) 은 한 레벨 위에 같은 이름 Route 를 Intercept 한다.
(..)(..) 은 두 레벨 위에 같은 이름 Route 를 Intercept 한다.
(...) 은 루트 Route 를 Intercept 한다.
여기서의 레벨은 Route 를 말하는 것이지 파일시스템을 말하는 것이 아니다.
app
|-feed
-layout.tsx
-page.tsx
|-(..)photo
|-[id]
-page.tsx
|-photo
|-[id]
-page.tsx
-layout.tsx
-page.tsx우선 (..) 를 빼고 보면 photo 폴더가 루트에 하나, feed 폴더에 하나다. 아까 예시에 사용자가 feed 내 위치해 있다고 가정하고 사진을 보는 모달을 띄우고 싶다고 하자. 사진을 띄우는 모달은 루트 내 photo 폴더에 만들어 뒀다.
만약 사용자에게 모달을 보여주려면 feed 폴더 내에 새로 모달을 만들어도 되지만 위처럼 (..)photo 폴더를 만들고 page.tsx 에서 photo 폴더의 page.tsx 를 임포트하는 것만으로 재사용이 가능할 것이다.
즉 위의 예시에서 /feed 에 위치한 상태로 /photo/123 으로 이동하는 코드가 아래와 같이 준비되어 있다면 /feed 화면 내에 다른 화면 이동 없이 /photo/123 을 보여주는 것이다.
