Next.js 병렬 라우팅 & 경로 가로채기를 통한 모달 페이지 구현

처음에 구상한 UI 디자인을 바꾸면서 이 방식이 더 적합하다 생각되어 변경했다. 

 

이게 처음 나왔던 피그마이고, 이때는 전역으로 모달 관리해주는 방식으로 redux-toolkit을 사용하려고 했다.

➡️ redux-toolkit을 이용해서 모달 상태관리

01. 전역에서 상태 관리되는 모달 만들기 (Next.js v14, redux-toolkit)

 

 

그러다가 다음이 바뀐 디자인이고, 이렇게 하려면 어떤 방식이 좋을까 고민하다가 Next.js의 기능 중 하나인 parallel routes와 intercepting routes를 사용해서 구현하기로 했다. 

 

 

병렬 라우팅을 구현해서 중간에 경로를 가로채는 것인데, 간단히 설명하면 중간에 만든 하위 페이지로의 경로를 가로채는 것이다. 

 

 

다음은 병렬 라우팅와 가로채기를 통한 모달 만들기의 장점이다.

• URL을 통해 모달 내용을 공유할 수 있다
• 뒤로 가기와 앞으로 가기로 뒷 페이지의 렌더링 없이 모달만 열고 닫을 수 있다

 

적용 전 튜토리얼

문서만 보기에는 헷갈리는 부분이 많았다. 지금 생각하면 라우트 설정만 잘 해주면 됐던 건데 처음에는 예시 레포를 봐도 어리둥절했다

 

ex.

/app/photo 페이지에서 /app/photo/text url로 경로를 가로채기, 병렬 라우팅을 이용해 모달을 띄운다고 하면 다음과 같이 작성하면 된다.

 

먼저 /photo 하위에 다음과 같이 설정한다.

// /app/photo/page.js
import Link from "next/link";

export default function Photo() {
  return (
    <>
      <h1>Photo List</h1>
      <Link href="/photo/text" className="text-white">
        Photo text
      </Link>
    </>
  );
}

 

// /app/photo/layout.js
export default function PhotoLayout({ children, modal }) {
  return (
    <div>
      {modal}
      {children}
    </div>
  );
}

 

그리고 /photo/[id]

// /app/photo/[id]/page.js

export default function PhotoId({ params }) {
    console.log({...params})
  return <h1 className="text-white">This is photo/id==? {params.id}</h1>;
}

 

/app 하위가 아닌, /photo 하위에 @modal로 시작하는 폴더를 만들고, 병렬 라우팅 설정을 한다.

@이름을 modal로 설정한 이유는 /photo/layout.js 에서 children과 함께 modal 로 설정을 해줬기 때문에 둘을 동일하게 맞춰준다.

 

/photo/@modal

// /src/app/photo/@modal/default.js

export default function ModalDefault() {
  return null;
}

// src/app/photo/@modal/page.js

export default function ModalPage() {
  return <div>Modal Page</div>;
}

 

 

이제 경로 가로채기를 할건데, 난 /photo/text 처럼 @modal 폴더 밑에 만들어야 하는데 폴더 구조상 두단계 위의 라우트를 가로채야하기 때문에 @modal/(..)photo/[id]와 같은 폴더 구조를 가져야 한다. 

 

경로를 보면 다음과 같이 때문에 두단계 위인 것: src/app/photo/@modal/(..)photo/text/page.js 

// src/app/photo/@modal/(..)photo/text/page.js

export default function InterceptedModalPhotoId({ params }) {
  return <h1 className="text-white">Intercepted Photo Id {params.id}</h1>;
}

 

하고 params의 값을 console로 찍어보면 다음과 같이 text로 잘 나온다.

 

이제 실행시켜보면 다음과 같은 결과가 나오게 된다. 

 

뒤로 가기, 앞으로 가기를 해도 뒷 배경의 별이 그대로 있는 것을 알 수 있다.

그리고 새로고침을 했을 때는 intercepted 되지 않은 기본 설정된 페이지가 나오는 것을 알 수 있다.

 

이렇게,, 큰 삽질을 끝내고 내 상황에 맞춰 적용했다.

 

 

 

실제 적용 과정

 

 /timeline 페이지에서 위같은 모달 페이지가 필요했고 최종 폴더 구조는 다음과 같다.

나에겐 /timeline/event 랑 /timeline/movie 가 필요했음

 

 

먼저 /timeline 폴더내에 @modal 폴더를 넣고 설정한 default.js으로 하여금 초기 로드 또는 새로고침 중에 일치하지 않는 슬롯에 대해 렌더링할 수 있다. 

// app/timeline/@modal/default.js

export default function Default() {
  return null;
}

// app/timeline/@modal/page.js

"use client";
export default function TimelinePage() {
  return <h1>/timeline Modal Page</h1>;
}

 

 

/timeline/@modal/(..)timeline/event/page.js와 /timeline/@modal/(..)timeline/event/page.js에 띄울 내용을 알아서 만들어준다. 

 

 

 

그리고 /timeline/[id]/page.js처럼 실제 페이지가 있어야 (..)로 경로를 가로챌 수 있기 때문에 만들어준다.

// app/timeline/[id]/page.js

export default function TimelineId({ params }) {
  console.log({ ...params });
  return <h1 className="text-white">This is /timeline/id: {params.id}</h1>;
}

 

 

 

/timeline/layout.js

// /app/timeline/layout.js

export default function TimelineLayout({ children, modal }) {

  return (
    <>
      <div>{children}</div>
      <div>{modal}</div>
    </>
  );
}

 

/timeline 에서 테스트 해보기 위해 다음과 같이 링크를 걸어줬다.

// /app/timeline/page.js

"use client";
import Link from "next/link";

export default function Timeline() {
  return (
    <div className="text-white">
      <Link href="/timeline/event">사건 등록하기</Link>
      <Link href="/timeline/movie">영화 등록하기</Link>
    </div>
  );
}

 

 

위 과정은 다음과 같다.

사건 등록하기 => 가로채진 경로가 나왔고,

영화 등록하기 => 가로채진 경로가 나온 후 내가 새로고침을 하니 모달 페이지가 아닌 디폴트값으로 설정해준 페이지가 나오게 된다.

 

앞선 예시 gif처럼 뒷 배경에 별이 고정되어 있는 것을 보면 기존 화면(/timeline)을 리렌더링하지않고 고정시킨 그대로 그 위에 모달을 띄운다는 것을 알 수 있다.