미리보기
모달(Modal)
- 사용자 관심을 얻기 위해 사용하는 화면으로 다른 화면 위로 띄워 표현하는 화면이다.
모달은 어디에 쓰여질까?
모달은 사용자의 이목을 끌 수 있는 다양한 곳에서 사용이 가능하다.
예를 들어 사용자가 어떤 동작을 실행 했을때 동작이 제대로 실행되었는지 알려주는 알림 형태,
어떤 동작을 실행할 것인지 묻는 확인 형태, 사용자의 입력을 받도록 할 수 있게 하는 입력 형태로 사용이 가능하다.
부트 스트랩 모달
알림 형태
확인 형태
입력형태
리액트에서 모달 사용하기
react-modal 설치
리액트에서 모달을 편하게 만들어주는 라이브러리인 react-modal을 설치한다.
npm install react-modalindex.html 설정
react-modal을 사용하기 위해 index.html에 부모 역할을 하는 modal id를 가지는 div 태그를 생성해준다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<div id="modal"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>모달 컴포넌트 생성
Modal 컴포넌트가 렌더링 될때 isOpen 이라는 State를 하나 생성하고 기본값을 true로 설정해줍니다.
그리고 ReactModal Element를 생성해줍니다.
생성한 ReactModal Element에 isOpen 속성 값으로 생성한 State인 isOpen값을 설정해줍니다.
css를 적용하기 위해 className, overlayClassName 에 Modal, Overlay를 설정해 줍니다.
버튼이 눌리고 나서 css의 transition 효과를 주기 위해 closeTimeoutMS에는 1초를 설정해줍니다.
import "./Modal.css";
import { useState } from "react";
import ReactModal from "react-modal";
const Modal = () => {
const [isOpen, setIsOpen] = useState(true);
return (
<ReactModal
parentSelector={() => document.querySelector("#modal")}
isOpen={isOpen}
className="Modal"
overlayClassName="Overlay"
closeTimeoutMS={1000}
ariaHideApp={false}
>
<section>
<div className="header">
<h2>title</h2>
</div>
<div className="content">
<p>content</p>
</div>
<div className="footer">
<button
onClick={() => {
setIsOpen(false);
}}
>
버튼
</button>
</div>
</section>
</ReactModal>
);
};
export default Modal;모달 컴포넌트 CSS 설정
다음과 같은 CSS 스타일을 설정합니다.
주의해서 봐야되는 점은 Modal, Overlay, ReactModal_Overlay 스타일입니다.
Modal의 배경색은 하얀색, Overlay의 배경색으로 살짝 검은색을 주었습니다.
그리고 ReactModal_Overlay에 trasition 설정과 opacity 설정을 하고 ReactModal_Overlay --after-open, ReactModal_Overlay--before-close에 opacity 속성을 주어 모달이 열리면 불투명하게 바뀌고 모달이 닫히면 투명하게 바뀌도록 설정해주었습니다.
<!-- 모달 영역 -->
.Modal {
outline: none;
background-color: white;
}
.ReactModal__Content {
min-width: 400px;
}
.ReactModal__Content .header {
padding: 10px;
background-color: rgb(203, 203, 245);
}
.ReactModal__Content .header h2 {
margin: 0;
}
.ReactModal__Content .content {
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
}
.ReactModal__Content .footer {
display: flex;
}
.ReactModal__Content .footer > button {
flex: 1;
background-color: rgb(169, 169, 240);
padding: 12px;
border: 2.5px solid #e0e1e4;
border-radius: 5px;
cursor: pointer;
user-select: none;
}
<!-- 레이아웃 영역 -->
.Overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.6);
}
.ReactModal__Overlay {
opacity: 0;
transition: opacity 1000ms ease-in-out;
}
.ReactModal__Overlay--after-open {
opacity: 1;
}
.ReactModal__Overlay--before-close {
opacity: 0;
}'React' 카테고리의 다른 글
| 모달 대신 SweetAlert2 사용해보기 (0) | 2024.07.04 |
|---|---|
| 로그인 컴포넌트 기능 구현하기 (1) | 2024.06.11 |
| 회원가입 컴포넌트 기능 구현하기 (0) | 2024.06.11 |
| 로그인, 회원가입 컴포넌트 라우팅 설정 (0) | 2024.06.08 |
| 회원가입 컴포넌트 생성하기 (1) | 2024.06.05 |
