[DevNote] 0128

Noah Ko·2022년 6월 19일

DevNote

목록 보기

19/31

오늘 내가 공부 한 것.

오늘은 React로 모달창을 띄워보는 것을 했다. 생각보다 어렵지는 않았지만 처음부터 다 작성해야 한다면 시간이 조금 걸렸을 것 같다.

모달창 만들기

조건은 이러했다.

재사용성 고려하기
Redux 없이 만들기
함수형으로 만들기

파일 구조

먼저 컴포넌트로 Modal.js를 만들어주고 App.js에서 Route하게 했다.
Modal.js

import React from "react";
import "../shared/modal.css";
import Input from "../elements/Input";

const Modal = (props) => {
  //열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴.
  const { open, close, header } = props;

  return (
    <React.Fragment>
      <div className={open ? "openModal modal" : "modal"}>
        {open ? (
          <section>
            <header>
              {header}
              <button className="open" onClick={close}>
                닫기
              </button>
            </header>
            <main>
              <div className="leftside">
                <h2>환영합니다</h2>
              </div>
              <div className="rightside">
                <Input
                label="아이디"
                placeholder="아이디를 입력하여 주세요" />
                <Input
                  label="비밀번호"
                  placeholder="비밀번호를 입력하여 주세요"
                />
              </div>
            </main>
            <footer>
              <button className="close" onClick={close}>
                close
              </button>
            </footer>
          </section>
        ) : null}
      </div>
    </React.Fragment>
  );
};

export default Modal;

modal.css 파일도 만들어 준다.

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal button {
  outline: none;
  cursor: pointer;
  border: 0;
}
.modal > section {
  width: 90%;
  max-width: 606px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #fff;
  /* 팝업이 열릴때 스르륵 열리는 효과 */
  animation: modal-show 0.3s;
  overflow: hidden;
}
.modal > section > header {
  position: relative;
  padding: 16px 64px 16px 16px;
  background-color: #fff;
  font-weight: 70;
}
.modal > section > header button {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 60px;
  font-size: 17px;
  font-weight: 70;
  text-align: center;
  color: #999;
  background-color: transparent;
}
.modal > section > main {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  height: 450px;
  /* border-bottom: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6; */
}

.modal > section > main > .leftside {
  padding-top: 130px;
  width: 50%;
  text-align: center;
  border-right: 1px solid #6c757d;
}

.modal > section > main > .leftside > img {
  width: 50%;
}

.modal > section > main > .rightside {
  width: 50%;
  height: 20%;
  padding-left: 10px;
  text-align: left;
}

.modal > section > footer {
  padding: 12px 16px;
  text-align: right;
}
.modal > section > footer button {
  padding: 6px 12px;
  color: #fff;
  background-color: #6c757d;
  border-radius: 5px;
  font-size: 13px;
}
.modal.openModal {
  display: flex;
  align-items: center;
  /* 팝업이 열릴때 스르륵 열리는 효과 */
  animation: modal-bg-show 0.5s;
}
@keyframes modal-show {
  from {
    opacity: 0;
    margin-top: -50px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes modal-bg-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

이렇게 만든 컴포넌트를 App.js에 넣어준다. 물론 로그인 페이지에 들어가겠지만 지금은 테스트를 위해 App.js에서 실행해보았다.

//function import
import React from "react";
import "./App.css";
import Modal from "../components/Modal";
import { ConnectedRouter } from "connected-react-router";
import { Route } from "react-router-dom";
import { history } from "../redux/configureStore";

//Page Import
import Login from "../pages/Join";

function App() {
  // useState를 사용하여 open상태를 변경한다. (open일때 true로 만들어 열리는 방식)
  const [modalOpen, setModalOpen] = React.useState(false);

  const openModal = () => {
    setModalOpen(true);
  };
  const closeModal = () => {
    setModalOpen(false);
  };

  return (
    <React.Fragment>
      <button onClick={openModal}>모달팝업</button>
      <Modal open={modalOpen} close={closeModal} header="이게 되네"></Modal>
    </React.Fragment>
  );
}

export default App;