[NextJS] NextJS 14버전 Parallel Routes로 만든 모달에서 페이지 이동 시 모달이 닫히지 않는 이슈

📙 개요

개발환경
next: v14.2.15

 

NextJS에서는 병렬 라우팅(Parallel Routes)와 인터셉팅 라우팅(Intercepting Routes)를 사용하여 모달을 만들 수 있다.

현재 프로젝트에서 모달에 대한 폴더 구조는 아래와 같이 구성되어 있다.

 

app/
├── @modal/
│   ├── default.tsx            // 모달이 활성화되지 않았을 때 null 반환
│   └── (.)login/page.tsx      // 모달 컴포넌트 렌더링
├── _component/LoginModal.tsx  // 모달 컴포넌트  
└── signup/page.tsx            // 회원가입 페이지

 

로그인 모달 컴포넌트에는 <Link> 를 사용한 페이지 이동이 두 개가 존재한다.

export default function LoginModal() {
    // ...

  return (
    // ..
    <Link href="/">
      <Image src={logo} alt="로고" />
    </Link>
    <Link href="/signup">
      회원가입
    </Link> 
  );
}

모달이 열린 상태에서 /signup으로 이동한 경우

이처럼 모달이 열린 상태에서 <Link> 를 사용하여 페이지가 이동 되는 경우, 모달은 계속 열려있는 상태로 남아있게 된다.

 

📙 null을 반환하는 페이지를 만들자 !

NextJS 공식문서에서는 모달을 제거하기 위해서는 슬롯(@modal)과 매칭되지 않을 때 return null을 반환하는 페이지 컴포넌트를 만들면 된다고 나와있다.

 

이렇게 하면 경로가 변경될 때 슬롯이 매칭되지 않게 되어 return null 페이지가 렌더링 되면서 모달이 닫힌다.

이를 통해 모달의 상태를 경로 기반으로 손쉽게 관리할 수 있다.

 

루트 경로의 이동 시 모달이 닫히게 하려면 @modal/page.tsx를 생성하고, 그 외의 경로를 처리하려면 @modal/[…catchAll]/page.tsx를 생성하면 된다.

app/
├── @modal/
│   ├── page.tsx               // 루트 경로에서 모달 닫기
│   ├── [...catchAll]/page.tsx // 그 외 경로 모달 닫기
│   ├── default.tsx            
│   └── (.)login/page.tsx     
├── _component/LoginModal.tsx  // 모달 컴포넌트  
└── signup/page.tsx            // 회원가입 페이지

// @modal/page.tsx
// 루트 경로로 이동 시 모달 닫기
export default function ModalPage() {
  return null;
}

// @modal/[...catchAll]/page.tsx
// 루트 경로 외의 다른 경로로 이동 시 모달 닫기
export default function CatchAll() {
  return null;
}

 

📙 루트 경로 이동에는 모달이 잘 닫히는데 .. 다른 경로는 ?!

이 부분 때문에 에러 해결에 시간이 걸렸다 💧

모달이 열린 상태에서 루트 경로로 이동하면 모달이 정상적으로 닫힌다 ! 그러나 !! 💣💣💣

회원가입 페이지로 이동할 때는 CatchAll 페이지가 작동하지 않았다.

 

이 문제는 현재까지도 해결되지 않은 문제임을 NextJS 깃헙에서 찾을 수 있었다.

토론 내용을 보면 여러 해결책이 제시되었는데, 나는 그중 가장 단순한 방법을 선택했다.

// _component/LoginModal.tsx
const pathname = usePathname();
const initialPath = useRef(pathname);

if(pathname !== initialPath.current) {
  return null;
}

usePathname() 훅을 사용하여 initialPath(/login)와 현재 path가 다르면 null을 반환하여 모달을 닫는 방식이다.

예를 들어, 로그인 모달에서 회원가입 페이지로 이동하면 pathname이 /signup으로 변경되어 initialPath와 달라지므로 모달이 자동으로 닫힌다.

 

모달의 개수가 적을 경우 위와 같이 간단한 방식으로 적용하면 되지만, 모달의 개수가 늘어날수록 비효율적인 방법이 되므로 케이스에 맞게 잘 적용해야 한다.

 

이번 글이 공식 문서를 통해 나와 같이 혼란을 겪은 사람들에게 도움이 되었으면 좋겠다. ☺️ NextJS 자체에서 문제가 해결되면 더 BEST지만 ,,