Next에서 더 효과적인 modal 개발하기 (Parallel Routes & Intercepting Routes) 😎

기존에 React modal을 개발할 때 React Portal을 사용하기도 하고, 조건부 렌더링을 사용하기도 했다. 내가 개발해봤던 이런 기존 방식의 모달은 단점이 있는데, 단순히 컴포넌트를 JS로 화면에 띄우는 방식이기에 브라우저 기능과 웹페이지가 연동된 느낌은 아니다. 즉, 모달을 띄우고 브라우저 뒤로가기를 눌렀을 때 사용자는 모달이 닫히는 것을 생각할 수 있지만 실제로는 모달과 그 뒤의 화면이 통째로 날아가는 경험을 할 수 있다는 점이다. Next.js 15 app router에서는 Parallel Routes과 Intercepting Routes를 사용하여 좀 더 나은 형태의 모달을 개발할 수 있다고 들었기에, 직접 알아보고 예제를 작성해보기로 했다 🥜Parallel RoutesNext의 앱 ..

• format_list_bulleted 웹 개발
• · 2025. 2. 21.
• textsms

Modal 화면 구현 (Modal 외부 클릭 시 Modal 꺼짐)

모달창을 구현하는데 있어서 뒤에 화면을 뿌옇게 하고, 모달창의 바깥을 클릭 시 모달창이 꺼지는 기능을 구현하였다. 기본적인 구현 아이디어는, 기존의 화면을 전부 덮어버리는 투명한 요소를 만들고, 이 요소 위에 Modal을 구현하는 것이다. 바깥의 투명한 화면을 클릭하면, 모달창이 꺼지게 만들며 Modal 내부에 닫기 버튼을 만들 수도 있다. Tailwindcss를 사용한 구현 import React from 'react'; export default function Modal({ setIsShow }: { setIsShow: () => void }) { return ( Modal Context close ) } Css를 이용한 기본 구현 가장 기본적인 css를 사용해서도 구현하였다. 역시 미래에 참고하기..

• format_list_bulleted JavaScript
• · 2023. 5. 2.
• textsms