이런 창을 한 번 만들어보도록 하겠습니다.
실제로 팀의 프로젝트에 참여하며 얻은 방법을 공유해보고자 합니다.
Modal이 뭐야
사용자의 이목을 끌기 위해 사용하는 화면 전환 기법을 의미합니다.
웹 개발에서는 주로 위 사진과 같은 다이얼로그 형태로 나타냅니다.
개발 시작해보기
Tailwind CSS를 기준으로 작성한 코드입니다!
CSS 코드는 알맞게 조정하여 사용해주세요 :)
Modal UI 제작
먼저 띄울 Modal부터 만들어야겠죠? 바로 시작해봅시다.
/* Modal.js */
import { useEffect } from "react";
const Modal = ({ onOpenModal, text }) => {
useEffect(() => {
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = "auto";
};
}, []);
return (
<div className="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-main-black bg-opacity-70">
<div className="container w-[320px] h-[200px] flex flex-col items-center justify-center bg-main-black border-green border-2">
<div className="items-start">
<p className="font-main text-[18px] mb-[10px] text-white">{text}</p>
<button
onClick={onOpenModal}
className="border-none hover:text-green text-white font-main text-[18px] block mb-[10px]"
>
▶︎ 네
</button>
<button
onClick={onOpenModal}
className="border-none hover:text-green text-white font-main text-[18px] block"
>
▶︎ 아니오
</button>
</div>
</div>
</div>
);
};
export default Modal;onOpenModal, text
모달을 보여줄지 여부를 결정하는 함수, Modal에 들어갈 기본 텍스트를 props로 받게됩니다. 이건 뒤에 자세히 설명하도록 하겠습니다.
이 Modal.js 파일에서는 네/아니오 버튼을 누르면 onClick 속성을 통해 함수를 실행하여 Modal 창이 닫히도록 동작합니다.
useEffect
useEffect() 는 렌더링시 최초 1회 실행되는 함수를 담은 리액트 훅입니다. 여기서는 Modal이 띄워졌을 때 스크롤을 방지하기 위해 사용합니다.
Main 코드와 연결
/* EnrollForm.js */
import Modal from "../../components/Modal/Modal";
import { useState } from "react";
const EnrollForm = () => {
const [openModal, setOpenModal] = useState(false);
const onModalAlert = () => {
setOpenModal(!openModal);
};
return (
<div className="container w-[390px] mx-auto flex flex-col items-center justify-start bg-main-black">
{openModal && (
<Modal onOpenModal={onModalAlert} text="동아리를 개설하시겠습니까?" />
)}
<button
onClick={onModalAlert}
className="w-[295px] h-[50px] mb-[20px] bg-green font-main text-white"
>
동아리 등록
</button>
</div>
);
};
export default EnrollForm;현재 제가 참여하고 있는 프로젝트인 동아리 모집 웹페이지로 예제를 만들어 보았습니다.
openModal
useState() 훅을 사용하여 Modal 창이 띄워져있거나 없어진 상태를 관리하는 변수입니다.
true 라면 Modal을 띄우고 false 라면 Modal을 없앱니다.
onModalAlert
앞서 정의한 상태 변수를 false - true 간 변경을 하여 Modal을 띄울지말지 변경해주는 함수입니다.
여기서는 동아리 등록 버튼을 클릭하면 Modal이 띄워지도록 하고, Modal.js 파일에도 props로 전달되어 Modal에서 버튼을 누르면 Modal이 없어지도록 동작합니다.
Portal로 씌워주기
이대로 그냥 저장하면 Modal이 다른 요소들과 겹치게 됩니다. 왜 그럴까요?
Modal이 body의 최상위 요소가 아니기 때문에 다른 요소들과 겹치게 되는 것입니다.
따라서 Portal 을 사용하여 Modal을 body의 최상위로 옮겨줄겁니다.
index.html에 Portal 정의
/* public/index.html */
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
</html>아주 간단합니다. 먼저 index.html 의 root div에 위와 같이 코드를 작성해줍니다.
Portal 만들기
/* ModalPortal.js */
import ReactDOM from "react-dom";
const ModalPortal = ({ children }) => {
const element = document.getElementById("modal-root");
return ReactDOM.createPortal(children, element);
};
export default ModalPortal;
Portal 을 만들기 위해 이런 코드를 작성해줍니다.
Portal 연결
이제 위에서 만든 Portal 을 Modal을 body의 최상위에 띄우기 위해 Modal.js 에 연결 시켜보겠습니다.
/* Modal.js */
import { useEffect } from "react";
import ModalPortal from "./ModalPortal";
const Modal = ({ onOpenModal, text }) => {
useEffect(() => {
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = "auto";
};
}, []);
return (
<ModalPortal>
<div className="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-main-black bg-opacity-70">
<div className="container w-[320px] h-[200px] flex flex-col items-center justify-center bg-main-black border-green border-2">
<div className="items-start">
<p className="font-main text-[18px] mb-[10px] text-white">{text}</p>
<button
onClick={onOpenModal}
className="border-none hover:text-green text-white font-main text-[18px] block mb-[10px]"
>
▶︎ 네
</button>
<button
onClick={onOpenModal}
className="border-none hover:text-green text-white font-main text-[18px] block"
>
▶︎ 아니오
</button>
</div>
</div>
</div>
</ModalPortal>
);
};
export default Modal;ModalPortal 을 import 해주고 기존 컴포넌트 코드에 ModalPortal 을 씌워주는 것 만으로 연결은 끝납니다. 매우 간단하죠?
실제 실행
짜잔! 아주 정상적으로 실행됩니다!
