안녕하세요, 피터팬입니다!
오늘은 Modal을 작성해볼건데요.
모발(Modal)이란 화면 위에 하나의 작은 화면을 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다.
vs 팝업 ; 현재 화면에 다른 화면을 하나의 창으로 보여주는 기능
예시
- index.js
<html lang="en">
<head>
...
</head>
<body>
<div id="overlays"></div>
<div id="root"></div>
</body>
</html>
- Modal.js
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;
- Modal Component Modal Component는 Backdrop과 ModalOverlay로 구성된 Component입니다. Backdrop(배경)에는 onClose함수를, ModalOverlay는 Modal내부(props.children)를 전달합니다.
- Backdrop Component 클릭 시 onClose함수를 실행합니다.
- ModalOverlay Component 내부 구성(props.children)으로 구성되어 있습니다.
- createPortal ; 부모 Component의 DOM 계층 구조 바깥에 있는 DOM노드로 자식을 렌더링하는 방법 createDOM의 첫 번째 요소로 Backdrop과 ModalOverlay Component를, 두 번째 요소로 index.js에서 만든 #overlays를 전달해주었습니다.
- Modal.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: 20vh;
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);
}
}
- @media(미디어 쿼리) ; 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용합니다. 위에서 @media(min-width:768px){.modal{ }} ; .modal의 너비가 768px이상이라면 { } 내용을 적용합니다.
'WebProgramming > React' 카테고리의 다른 글
| [React] React로 로그인 기능 구현하기 (+ Firebase이용하여) (0) | 2022.08.31 |
|---|---|
| [React] fetch를 통해 HTTP 요청 보내기 (0) | 2022.08.02 |
| [React] 메모이징 (React.memo, useCallback, useMemo) (0) | 2022.07.30 |
| [React] Component에서 Componet로 배열 전달하기 (0) | 2022.07.26 |
| [React] useContext를 이용해 전역 props전달하기 2 (context.js로 분리시키기) (0) | 2022.07.22 |
| [React] useEffect를 이용한 DOM조작 (0) | 2022.07.22 |
| [React] useReducer를 이용한 상태관리 (0) | 2022.07.22 |
| [React] useRef로 input 상태 관리하기 (0) | 2022.07.21 |
안녕하세요, 피터팬입니다!
오늘은 Modal을 작성해볼건데요.
모발(Modal)이란 화면 위에 하나의 작은 화면을 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다.
vs 팝업 ; 현재 화면에 다른 화면을 하나의 창으로 보여주는 기능
예시
- index.js
<html lang="en">
<head>
...
</head>
<body>
<div id="overlays"></div>
<div id="root"></div>
</body>
</html>
- Modal.js
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;
- Modal Component Modal Component는 Backdrop과 ModalOverlay로 구성된 Component입니다. Backdrop(배경)에는 onClose함수를, ModalOverlay는 Modal내부(props.children)를 전달합니다.
- Backdrop Component 클릭 시 onClose함수를 실행합니다.
- ModalOverlay Component 내부 구성(props.children)으로 구성되어 있습니다.
- createPortal ; 부모 Component의 DOM 계층 구조 바깥에 있는 DOM노드로 자식을 렌더링하는 방법 createDOM의 첫 번째 요소로 Backdrop과 ModalOverlay Component를, 두 번째 요소로 index.js에서 만든 #overlays를 전달해주었습니다.
- Modal.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: 20vh;
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);
}
}
- @media(미디어 쿼리) ; 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용합니다. 위에서 @media(min-width:768px){.modal{ }} ; .modal의 너비가 768px이상이라면 { } 내용을 적용합니다.
'WebProgramming > React' 카테고리의 다른 글
| [React] React로 로그인 기능 구현하기 (+ Firebase이용하여) (0) | 2022.08.31 |
|---|---|
| [React] fetch를 통해 HTTP 요청 보내기 (0) | 2022.08.02 |
| [React] 메모이징 (React.memo, useCallback, useMemo) (0) | 2022.07.30 |
| [React] Component에서 Componet로 배열 전달하기 (0) | 2022.07.26 |
| [React] useContext를 이용해 전역 props전달하기 2 (context.js로 분리시키기) (0) | 2022.07.22 |
| [React] useEffect를 이용한 DOM조작 (0) | 2022.07.22 |
| [React] useReducer를 이용한 상태관리 (0) | 2022.07.22 |
| [React] useRef로 input 상태 관리하기 (0) | 2022.07.21 |
