6. 인터셉팅 라우트

🎨 소개

인터셉팅 라우트는 이름 그대로 특정 경로에 접속 시 경로를 가로채 다른 페이지의 정보를 보여주도록 해주는 기능이다.

 

페이지에 접속하는 방법은 두가지가 존재한다. 새로고침과 같은 외부 경로로 접속하는 방법과, 넥스트 페이지 사이에서 내부 경로로 접속하는 방법이 존재한다.

 

인터셉팅 라우트는 두가지 중에서 내부경로로 접속하는 경우에 한해서 가로채기를 할 수 있다. 즉, 인터셉팅 라우트를 사용하면 외부경로로 접속할 때와 내부경로로 접속할때 차이를 둘 수 있다.

 

 

🎩 컨벤션

인터셉팅 라우트 폴더를 생성할 때 아래와 같은 컨벤션으로 작성하면 된다.

• (.) : 같은 레벨의 경로 가로채기
• (..) : 한단계 위의 레벨에 있는 경로 가로채기
• (..)(..) : 두단계 위의 레벨에 있는 경로 가로채기
• (...) : 루트에서 일치하는 경로 가로채기

 

 

🎈 구성해보기

처음 공식문서를 보고서 테스트를 해보는데 아무리 시도를 해봐도 404페이지만 뜨고 정상적으로 가로채기가 되지 않았다. 그 이유를 찾지 못해 엄청 해매었던 기억이 있다.

 

그 이유는 바로 인터셉팅 라우트가, 내가 가로채기를 하려는 A 경로로 이동하는 모든 경우에 가로채기를 할 것이라는 생각때문이었다.

 

하지만 Nextjs에서의 개념은 그런것이 아니다. 특정 페이지에서 A 경로로 이동하는 경우에만 가로채기를 하는 것이다.

 

예를 들어 다음과 같은 구조가 존재한다. 

app
  ㄴphoto
    page.js
  ㄴboard
    (..)photo
      ㄴpage.js
    ㄴnotice
      ㄴpage.js
    ㄴpage.js
  ㄴpage.js

// app/page.js
export default function Home() {
  return (
    <>
      <div><Link href="/photo">이동</Link></div>
    </>
  )
}

// app/board/page.js
export default function Board() {
  return (
    <>
      <div><Link href="/photo">이동</Link></div>
    </>
  )
}

// app/board/notice/page.js
export default function Notice() {
  return (
    <>
      <div><Link href="/photo">이동</Link></div>
    </>
  )
}

// app/photo.js
export default function Home() {
  return <div>원본</div>;
}

// app/board/(..)photo/page.js
export default function Home() {
  return <div>가로채기</div>;
}

처음에는 인터셉팅 라우트의 위치는 크게 중요하지 않고, 위치에 따라 컨벤션만 지켜주면 가로채기가 되는 줄 알았다. 하지만 그게 아니었다. 인터셉팅 라우트 폴더가 위치한 경로를 포함한 모든 하위 경로에서 가로채기하려는 경로로 이동할 때 가로채기를 할 수 있다.

 

즉, 위의 구성에서는 '/' 경로에서 '/photo' 경로로 이동하는 경우에는 원본이 출력되는 것을 확인할 수 있다.

그래서 현재 구성에서는 '/board', '/board/notice' 경로에서 '/photo' 경로로 이동하는 경우에 가로채기될 수 있다. 이점만 유의해주면 된다.

 

 

🎄 활용

모달

보통 병렬 라우트와 함께 사용해서 모달을 구성할 때 주로 사용하게 된다. 예를 들어 갤러리를 구성한다고 하자. 갤러리의 이미지를 클릭하면 확대해서 보여주는 모달을 함께 보고 싶다. 이런경우 인터셉팅 라우트와 병렬라우트를 함께 구성할 수 있다. 갤러리는 /gallery 경로로, 상세 이미지는 /gallery/photo/1 와 같이 구성하면 라우팅 경로를 활용하기 때문에 이벤트 리스너를 활용하지 않고도 뒤로가기 앞으로가기를 통해서 쉽게 모달을 오픈하고 닫을 수 있다.

 

아래와 같이 구성할 수 있다. 이를 통해서 새로고침할땐 상세이미지만 보여주고, 내부 경로로 이동할 땐 갤러리와 모달을 함께 보여주게 된다.

app
  ㄴgallery
    ㄴphoto
      ㄴpage.js
    ㄴ@modal
      ㄴ(.)photo
        ㄴpage.js
    ㄴpage.js

 

✨ 주의해야할 점은 병렬라우트는 경로에 포함되지 않기 때문에 폴더 컨벤션 작성 시 이 점도 유의해서 폴더명을 작성해야 한다. 위의 예제에서는 @modal은 경로에 포함되지 않기 때문에 (.)를 사용한다.

 

 

로그인 화면

로그인 화면에도 이를 활용해볼 수 있다. 새로고침을 통해서 접근 하는 경우에는 전체 로그인 페이지를 보여주고, 현재 사이트를 사용하는 중에 로그인을 하는 경우에는 모달을 활용해서 로그인에 접근할 수 있게 한다.