설명

Parallel Route 는

• 모달로 다른 route 화면 미리 보기 + url 변경
  - NEXT.JS - Parallel Route - Modal
• 모달로 보는 미리 보기 page와 실제 page 구분 하여 개발 가능
• route에 국한되지 않고 한 화면을 완전히 나눠서 개발 가능하게 하기
  - NEXT.JS - Parallel Route - Conditional Routes

등 Parallel Route 기능이 없었다면 개발의 비용이 많이 들어
개발하기 어려웠을 세상을 이제는 상상력만 있다면 가능하게 만들었다.(react-query,TanStack Query 같은 느낌이랄까?)

나는 많은 사용 방법 중 '모달로 다른 route 화면 보여주면서 + url은 변경하기'를 자주 사용하는데, 이 부분을 사용하던 중 마주했던 문제가 있었다.

문제

페이지가 변경 혹은 이동이 되어도 계속 모달이 떠있는 문제였다.

여러 사이트를 돌아다니다 보니, 골치 아픈 이 문제는 많은 사람들이 '모달로 다른 route 화면 보여주면서 + url은 변경하기'에서 Parallel Route을 사용하지 않게 만드는 것 같기도 했다.

문제의 이유

NEXT.JS 공식 문서 - Parallel Route - Active state and navigation

Active state and navigation
By default, Next.js keeps track of the active state (or subpage) for each slot. However, the content rendered within a slot will depend on the type of navigation:

기본적으로 Next.js는 각 슬롯에 대한 활성 상태(또는 하위 페이지)를 추적합니다. 그러나 슬롯 내에 렌더링 되는 콘텐츠는 내비게이션 유형에 따라 달라집니다:

위 문서 내용에서 알 수 있듯 페이지가 변경되어도 Next.js는 해당 상태를 추적, 계속 유지한다.(물론 페이지 리프레시(refresh) 같은 하드 내비게이션은 상태를 추적할 수 없다.)

해결 방법

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#closing-the-modal

공식 문서에서 해당 슬롯(slote) 혹은 모달을 닫는 몇 개의 추천 방법이 있다.

1. router.back() 사용하기

• 이 방법은 진짜 닫기에 초점을 둔 것이다.
• Next.JS route는 route 명령이 여러 개가 있으면 마지막만 실행된다.

//아래 코드처럼 2개의 router를 사용하더라도 마지막만 반영되어 닫히지 않고 주소 이동만 될 것이다.

const router = useRouter()

router.back()
router.push('/search')

2. 상관 없는 페이지에서 닫아버리기

[...catchAll]/page.tsx

export default function CatchAll() {
  return null
}

• catchAll을 사용해서 해당되지 않는 모든 페이지에서 닫아버리기

선택한 해결 방법

나는 현재 2번째의 방법을 선택해서 사용 중이다.
사실 달리 방법이 없다.

하지만 이 방법은 너무 극단적인 해결 방법이다.

해당 모달의 더 세세한 열림, 닫힘 방법이 있다면 좋지 않았을까 많은 아쉬움이 남는다.
그래서 다들 여러 방법으로 끼워 맞춰보다 다시 더 기괴해지는 코드를 보고 parallel routes을 사용하지 않는 방법으로 돌아갔다는 글들이 많은 듯 하다.

간편해진 기능들은 세세한 조절이 쉽지 않음을 다시 실감하는 중이다.