[Next.js] Parallel Routes와 Intercepting Routes를 사용해 모달 띄우기

모달이 뜨면서 url 변경하기

수강 중인 클론코딩에서 배운 Parallel Routes와 Intercepting Routes에 대해 정리해보겠다!

 

---

🩵 Parallel Routes

 

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

대시보드 및 소셜 사이트의 피드와 같이 앱의 매우 동적인 섹션에 유리하다.

 

 

Parallel Routes 사용하기

폴더명 앞에 @를 붙여 생성한다. 이때 @가 붙은 폴더는 경로가 되지 않는다.

 

모달은 현재 페이지와 동일한 위치가 되야하기 떄문에 (beforeLogin) 안에 page.tsx를 옮겨준다.

여기에 layout.tsx 파일을 추가로 생성하는데 이것은 parallel route한 페이지에서 두 화면을 동시에 보여주기 위함이다.

 

// 가독성을 위해 타입을 따로 정의
type Props = {
  children: ReactNode;
  modal: ReactNode;
};

export default function BeforeLoginLayout({ children, modal }: Props) {
  return (
    <div className={styles.container}>
      {children}
      {modal}
    </div>
  );
}

레이아웃에서 페이지와 모달을 함께 받아 표시한다.

 

 

 

URL을 보면 로그인 모달은 /i/flow/login 경로에서 표시된다.

@modal 폴더 안에 /i/flow/login 폴더를 만들어 page.tsx를 넣으면 @modal 폴더 바로 아래의 page.tsx의 존재가 무의미하다.

왜? parallel routes로 동일한 레이아웃에 렌더링되기 때문!

 

이런 상황에서는 default.tsx를 사용한다.

 

default.tsx

초기 로드 또는 전체 페이지 리로드 중에 일치하지 않는 슬롯에 대한 전체 항목으로 렌더링할 파일을 정의

⇨ parallel routes의 기본값

 

// @modal/default.tsx
export default function Default() {
  return null;
}

현재는 필요가 없기 때문에 null을 반환한다. (page.tsx 대체)

 

이때 경로는 다음과 같다.

주소가 localhost:3000일때
children -> page.tsx
modal -> @modal/default

주소가 localhost:3000/i/flow/login일때
children -> i/flow/login/page.tsx
modal -> @modal/i/flow/login/page.tsx

 

 

 

 

---

🩵 Intercepting Routes

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

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

 

 

Intercepting Routes 사용하기

폴더 이름 앞에 (..)규칙을 사용해 정의한다.

• (.) : 동일한 수준의 세그먼트와 일치
• (..) : 한 수준 위(부모) 세그먼트와 일치
• (..)(..) : 두 수준 위의 세그먼트와 일치
• (...) : 루트 app 디렉토리 세그먼트와 일치

 

여기서  @modal/i/flow/login/page.tsx가 가로채야하는 경로는

🚨@modal은 경로가 아니다🚨

따라서 login과 동일한 위치이기 때문에 (.)을 붙여준다.

 

여기서 intercepting routes는 대상이 로그인 버튼을 누르면 이동하는 parallel routes인 modal이 된다.

그렇다면 intercepting 당한 i/flow/login의 page.tsx는 필요가 없는걸까?

❌❌❌

새로고침시에는 기존 i/flow/login의 page가 렌더링된다.

 

따라서 i/flow/login과 (.)i/flow/login의 page.tsx는 동일한 컴포넌트를 가진다.

여기서 중복되는 컴포넌트를 따로 관리하기 위해 private folder를 사용할 수 있다.

 

Private Folder

폴더 앞에 밑줄_을 붙여 생성한다.

private folder는 공통 부모 폴더 아래에 생성하고 라우팅에서 제외된다.