리액트 hooks로
간단한 모달창을 구현합니다.
간단한 모달창을 구현합니다.
구현내용
cdn 설치, 스타일은 기본만 사용
리액트 hooks 방식
버튼 클릭 후, 모달창 팝업 기능
구현 화면
리액트, 바벨 cdn 설치
- 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다.
- 구글에서 react cdn, bable cdn을 검색하여 페이지에서 cdn 코드 복사후, <head>태그 사이에 삽입합니다.
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
리액트 hooks 모달창, 팝업창 띄우기
html
<div id="root"></div>
css
body {
padding: 50px;
}
.openBtn {
background-color: #F9B514;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.modal .bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.modalBox {
position: absolute;
background-color: #fff;
width: 400px;
height: 170px;
padding: 15px;
}
.modalBox .closeBtn {
display: block;
width: 80px;
margin: 0 auto;
}
script
< script type = "text/babel" >
const App = () => {
const [modalOn, setModalOn] = React.useState(false);
const onOpenModal = () => {
setModalOn(!modalOn);
}
const Modal = () => {
return ( <
div className = "modal" >
<
div className = "bg" > < /div> <
div className = "modalBox" >
<
p > Lorem ipsum, dolor sit amet consectetur adipisicing elit.Consectetur quam nobis quis corrupti amet maxime neque, optio, in illo, voluptatibus consequuntur!Rerum quo ea nulla qui, maxime consectetur magni soluta! < /p> <
button className = "closeBtn"
onClick = {
onOpenModal
} > ✖ < /button> <
/div> <
/div>
);
};
return ( <
React.Fragment >
<
button className = "openBtn"
onClick = {
onOpenModal
} > 모달창 open < /button> {
modalOn ? < Modal / > : ''
} <
/React.Fragment>
)
} <
/script> <
script type = "text/babel" >
ReactDOM.render( < App / > , document.querySelector('#root')); <
/script>
화면 보기(Result 클릭)
반응형
'개발 > React' 카테고리의 다른 글
| [react] 리액트로 css, js로 도넛차트 구현 (0) | 2021.06.18 |
|---|---|
| [react] 리액트 tailwind 다이얼로그(모달, 팝업) 구현 (0) | 2021.06.18 |
| [react] 리액트 챗봇 스타일의 대화형 설문 조사 화면 구현 (0) | 2021.06.07 |
| [react] 리액트 삼항 연산자 조건부 스타일링(ft. tailwind, className) (0) | 2021.04.26 |
| [react] react 상태관리 context API, useContext 사용법 (0) | 2021.04.26 |
댓글