[Next] 페러렐 라우트 (parallel-routes)와 인터셉팅 라우트 (intercepting-routes)

페러렐 라우트 - 병렬 경로 (parallel routes)

병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다.

경로가 독립적으로 스트리밍될 때 각 경로에 대해 독립적인 오류 및 로드 상태도 정의할 수 있다.

 

사용법

@folder 로 명명한다.

동일 레벨의 레이아웃에 전달될 페이지가 없다면 default.tsx로 대체 해줘야 한다.

(default.tsx가 없다면 404가 렌더링 됨)

 

// @modal/default.tsx

export default function Default() {
  return null
}

 

적용 예시

@folder 로 명명하며, props로 동일한 레벨의 레이아웃에 전달된다.

아래 그림 예시에서는 @modal 로 명명하였으며 동일 레벨의 layout.tsx에 props로 전달됐다.

(@modal2, @modal3, .. 이렇게 만들어도 된다.)

인터셉팅 라우트 (intercepting-routes)

경로를 가로채서 현재 레이아웃 내 애플리케이션의 다른 부분에서 경로를 로드한다.

다른 컨텍스트로 전환하지 않고 경로의 내용을 표시하려는 경우 유용하다.

 

* 어디서 접근하냐에 따라 다르게 보여준다.

사용법

• (.) 동일한 수준 의 세그먼트를 일치
• (..) 한 수준 위의 세그먼트와 일치
• (..)(..) 두 수준 위의 세그먼트와 일치
• (...) 루트 app 디렉터리 의 세그먼트를 일치

 

적용 예시

최상위 page.tsx에서 (즉, Main) Link 태그를 통해 i/flow/login에 접근하면 인터셉트 라우트에 의해 (.)i/flow/login 경로로 매칭된다.

대신 새로 고침을 통해 접근한다면 기존 경로, 즉 i/flow/login으로 매칭된다.

 

* 어디서 접근하냐에 따라 다르게 보여준다.

 

페러렐 라우트와 인터셉팅 라우트 목적

아래 그림과 같이  localhost:3000 경로가 아닌 localhost:3000/i/flow/login 에서 모달을 띄우고 싶었다.

그렇기에 localhost:3000 에 해당하는 폴더 구조 안에서 페러렐 라우트를 사용하여 모달을 만들어주고,

인터셉팅 라우트를 활용하여 원하는 경로의 구조를 생성한 뒤 파일을 옮겨담아 주면 된다.

 

여기서 주의할 점은 @modal의 default.tsx를 만들어야 하는 것이다.

주소가  localhost:3000 일 땐, {children} 에 page.tsx, {modal} 에 @modal/default.tsx 

주소가  localhost:3000/i/flow/login 일 땐, {children} 에 i/flow/login/page.tsx, {modal} 에 @modal/(.)i/flow/pages.tsx 가 매칭되기 때문이다.

 

 

결과

이렇게 localhost:3000 경로에서,

접근1. Link (로그인) 버튼을 누르면  localhost:3000/(.)i/flow/login (인터셉팅 라우트) 으로 경로가 바뀌면서 모달이 뜨게 된다.

(접근2. 새로 고침을 할 시 localhost:3000/i/flow/login 경로를 유지하지만 배경은 하얘진다.)

 

핵심은 뒤에 Main 페이지가 그대로 보인다는 점! (페러렐 라우트)

 

 

 

 

---

코드와 함께 봐야 이해가 갑니둥

https://github.com/kiki9323/next-sns/tree/main/src/app/(beforeLogin)

 

1. `<Link href="/login">` 클릭을 통해서
2. `(beforeLogin)/login/page.tsx`로 이동
    1. 여기서는 `replace('i/flow/login')`으로 리다이렉트
3. router.replace('i/flow/login')으로 이동하였으므로, 인터셉팅 라우터가 작동하여 `(.i)/flow/login/page.tsx`로 이동
4. `i/flow/login/page.tsx`는 새로고침으로 이동 할 때 보여줌

 

* Link와 더불어서 router.push, router.replace 모두 인터셉팅 라우터를 작동 시킨다!