웹 개발을 하면서 Modal은 떼려야 뗄 수 없는 관계이다.
이 컴퍼넌트는 재 사용율이 높을 것 같아서 여기다가 정리한다.
ReactDOM.createPortal을 사용했다.
우선 public/index.html 파일에 가서 modal을 띄울 div를 하나 만든다. 나는 root div 바로 위에 추가했다.
id는 overlays로 네이밍 했다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="overlays"></div>
<div id="root"></div>
</body>
그다음 components 밑에 UI 폴더 밑에 파일을 생성한다.
Modal.module.css
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 20;
background-color: rgba(0, 0, 0, 0.75);
}
.modal {
position: fixed;
top: 15vh;
left: 5%;
width: 90%;
background-color: white;
padding: 1rem;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
z-index: 30;
animation: slide-down 300ms ease-out forwards;
}
@media (min-width: 768px) {
.modal {
width: 40rem;
left: calc(50% - 20rem);
}
}
@keyframes slide-down {
from {
opacity: 0;
transform: translateY(-3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Modal.js
ReactDom.createPortal을 이용하여 id가 overlays의 div 부분에 Modal이 생성되도록 했고 검은 배경 부분을 클릭해도 모달이 사라지도록 했다.
import { Fragment } from "react";
import ReactDOM from "react-dom";
import classes from "./Modal.module.css";
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onClose} />;
};
const ModalOverlay = (props) => {
return (
<div className={classes.modal}>
<div className={classes.content}>{props.children}</div>
</div>
);
};
const portalElement = document.getElementById("overlays");
const Modal = (props) => {
return (
<Fragment>
{ReactDOM.createPortal(
<Backdrop onClose={props.onClose} />,
portalElement
)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</Fragment>
);
};
export default Modal;
css나 props로 내려주는 onClick부분의 이벤트, content는 입맛에 맞도록 수정하면 된다.. 끝!
'React > 자주쓰는 Component 활용하기' 카테고리의 다른 글
| Button Component 활용하기 (0) | 2022.07.28 |
|---|
댓글