[Next.js] Interception Routes와 Parallel Routes로 모달(Modal) 구현하기

 

//  Interception Routes

Interception Routes는 현재 페이지에서 특정 route를 로드할 수 있는 기능이다. (현재 페이지를 intercept)

모달 창을 열거나 닫을 때 전체 페이지를 새로고침 하지 않고 현제 페이지 위에 모달을 표시할 수 있게 해준다.

만약 공유된 URL을 클릭하거나 새로고침 할 경우에는 interception routes 페이지가 아닌 기존 페이지로 렌더링된다.

---

▪ 디렉토리 생성

interception routing을 위해서는 디렉토리를 생성해서 상대경로를 지정해야 한다.

해당 디렉토리에서 어떤 페이지를 intercept 할 건지에 따라 경로를 설정하면 된다.

• (.) : 같은 레벨의 경로를 intercept.
• (..) : 한 레벨 위의 경로를 intercept.
• (..)(..) : 두 레벨 위의 경로를 intercept.
• (...) : 루트 app 디렉토리의 경로를 intercept.

예를 들어 ,

/app
  /products
    - page.tsx

products의 page.tsx 페이지를 intercept하고 싶다면(위에 모달창을 띄우고 싶다면)

/app
  /products
    - page.tsx
    /(..)detail
      - page.tsx

이런 식으로 생성해 주면 된다.

 products 디렉토리의 page.tsx는 /products URL에 매핑되고,

(..)detail 디렉토리의 page.tsx는 한 레벨 위인 products의 경로를 intercept 하여 /detail URL에 매핑된다.
  => 한 레벨 위인 products 밖으로 나간다고 생각하면 이해가 쉽다.

---

// Parallel Routes

동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링한다.

모달 창을 포함한 다양한 컴포넌트를 한 페이지 내에서 동시에  표시할 수 있게 해준다.

---

▪ 디렉토리 생성

parallel routing을 위해서는 디렉토리를 생성해서 표시할 여러 경로를 선택한다.

• @ : 경로 세그먼트의 이름을 지정하여 특정 경로를 나타낸다.

예를 들어,

/app
  /products
    - layout.tsx
    - page.tsx
    /@modal
      - default.tsx
      /(..)detail
        - page.tsx

이 경우 /products의 page.tsx와 /@modal > /(..)detail 의 page.tsx가 병렬 렌더링 될 수 있다.

---

▪ layout.tsx 수정

import React from 'react';

function ListLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {modal}
      {children}
    </>
  );
}

export default ListLayout;

---

▪ default.tsx 수정

Layout.tsx에서 modal을 로딩하는데, 만약 특정 경로에 해당하는 modal이 없으면 404에러가 나게 된다.

이걸 방지하기 위해 default 페이지를 생성해준다.

이름은 default.tsx가 되어야 한다!

function Default() {
  return null;
}

export default Default;

---

이제 /@ >  /(..) 안에 있는 page.tsx 모달의 UI를 예쁘게 만들어주기만 하면 된다!

병렬 렌더링이기 때문에 배경은 투명도를 조절하는 것이 좋다.