Next.js 14버전에서 모달창 띄우는 초간단 방법
Next.js 14 버전에서 모달 창을 쉽게 띄우는 방법을 포스팅하려고 합니다. Next.js는 폴더의 형태와 이름에 따라 경로 구성과 기능이 달라지니, 폴더 구조와 이름을 주의 깊게 설정하는 것이 중요합니다. 아래 글을 참고하여 설정해 보세요.
모달 창을 띄우기 위한 기술
Next 14버전에서 모달을 띄우기 위한 핵심기술로 패러랠 라우트와 인터셉트 라우트가 있습니다. 일반적으로 모달을 구현하기 위해 다음과 같은 폴더 구조를 사용합니다.
└── app
├── @modal
│ ├── default.js
│ ├── (.)flow
│ │ └── page.js
│ └── ...
└── ...
패러랠 라우트
개념
하나의 layout에 여러 개의 화면을 동시에 표시하는 기능입니다. 모달 창 구현에서 컨텐츠 화면 children과 modal 2개의 화면을 동시에 표시하는 데 사용됩니다.
구현 방법
폴더 이름 앞에 @를 붙이면 해당 폴더가 패러랠 라우트가 됩니다.
예시
@modal
└── index.js
...
인터셉트 라우트
개념
기본 라우트를 인터셉트 라우트로 설정된 폴더 위치의 라우트로 대체하는 기능입니다. 모달 창 구현에서 여러 화면 중 하나에서 모달 창 열기를 클릭하면 해당 화면에 대해 인터셉트 라우트로 미리 제작된 동일한 화면을 딤드 아래에 깔아서 표시하여 통일성을 유지합니다.
구현 방법
폴더 이름 앞에 (.), (..) 또는 (...)를 붙입니다. 그 뒤에 나오는 파일 경로와 파일명이 동일하면 교체가 이루어집니다.
예시
(.)flow
└── index.js
...
참고 사항:
(.)는 현재 폴더, (..)는 상위 폴더, (...)는 상위 폴더의 상위 폴더를 의미합니다.
인터셉트 라우트는 기본 라우트보다 우선순위가 높습니다.
인터셉트 라우트는 동일한 파일 경로와 파일 이름을 가진 라우트에만 적용됩니다.
폴더의 전체적인 구조
모달 창을 띄우기 위한 예시 폴더명과 파일명에 대하여 설명합니다
1. 패러랠 라우트 적용한 layout.tsx
layout.tsx는 모달창을 띄우기 위한 시작점이라고 보시면 됩니다. 패러랠 라우트는 layout 파일에서 실행됩니다.
코드를 보면, 1번이 기본으로 나오는 컨텐츠 위치이고 2번 {modal}이 병행으로 나올 모달 화면 위치입니다.
패러랠 라우트의 default.tsx
패러랠 라우트를 사용한 곳에는 default.tsx를 만들어놔야 라우트할 때 오류를 없앨 수 있습니다. 내용은 간단합니다.
// @modal/default.tsx --> 참조이미지에서 6번 파일
export default function Default() {
return null;
}
2. 인터셉트 라우트
인터셉트 라우트를 적용해야 혹시나 화면을 강제로 리프레쉬를 하더라도 현재와 동일한 화면을 보여 줄 수 있습니다.
만약 인터셉트 라우트를 적용 하지 않는다면 해당 화면에서 버튼을 눌러서 모달창을 띄웠을 경우는 정상적으로 나오지만 모달 창이 있는 상태에서 리프레쉬를 할 경우 모달창 화면 아래의 내용이 빈화면으로 보여지게 됩니다.
4번이 기본 폴더와 파일의 구조입니다. 해당 .tsx파일들이 각각 하나의 화면을 담당하게 됩니다.
5번 인터셉트로 사용한 폴더와 파일은 @modal폴더 안에 구성이 되어 있는데요.
(.)으로 시작하는 (.)i\flow가 인터셉트 라우트입니다.
(.)i\flow 폴더 하위의 login폴더에 page.tsx가 있는데, 기본 폴더와 동일하게 구성되어 있습니다.
주소창에 기본 폴더로 생성된 주소로 접근하게되면 인터셉트 라우트로 설정된 화면이 나오게 되는 식입니다.
(인터셉트 화면을 포함해야 모달창 아래에 원래 있어야하는 화면이 깔리게 됩니다.)
결론
이렇게 적용을 하면 패러랠 라우터로 한화면에 2개의 모듈 화면을 띄울수 있고 그중에 모달창으로 띄워진 화면에 인터셉트 라우트를 적용해서 화면을 리프레쉬를 하더라도 동일한 화면을 띄울 수 있게 됩니다.
감사합니다.