[항해99] Day52. TIL – React Modal 을 써보자!

👩🏻‍💻 Today I Learned 📚

 

 

 

⭐ React에서 모달창 만들기

지난 주에 모달창을 만들어야할 때 따로 React-Modal 라이브러리를 쓰지 않았는데, 이번에 또 모달창을 만들어야해서 새로운 것을 써보자는 마음에 써봤다. 생각보다 간단해서 너무 좋았던 react-modal

 

 

⭐ React-Modal

아주 효율적인 리액트 라이브러리 중 하나인 모달. 사용하려면 우선 설치부터 해야한다.
react-modal(공식문서)

npm install react-modal

or

yarn add react-modal

 

 

 

⭐ 모달 컴포넌트 만들기

modal창을 본격적으로 만들기 전에 index.js 파일에서 리액트 모달을 import 해줘야합니다. 모달이 열려있을 때 화면을 보고 있을 유저가 모달창이 아닌 다른 컴포넌트의 컨텐츠를 보지 않도록 하기 위해 숨겨줄 엘리먼트를 정의해주는 겁니다.

import React, { useState } from "react";
import UserModal from "../components/UserModal";


const Mypage = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const handleClose = () => {
    setModalOpen(false);
  };


  return (
    <>
      <MypageBox>
        <Grid is_container padding="16px" _className="border">
          <UserInfo>

            <Button Btn _className="btn" _onClick={() => setModalOpen(true)}>
              회원정보수정
            </Button>
          </UserInfo>

           //모달창 컴포넌트
          <UserModal 
               isOpen={modalOpen} 
              onCancel={handleClose} 
              name={name} />

        </Grid>
      </MypageBox>
      <Nav />
    </>
  );
};

 

📍 모달창을 컴포넌트로 따로 분리하고 상위 컴포넌트에서 useState를 사용해서 오픈과 클로징을 관리해주고 props로 넘겨줍니다

 

import React, { useState } from "react";
import ReactModal from "react-modal";
import { icons } from "../shared/util";
import { Image } from "../elements/index";

import styled from "styled-components";

const UserModal = (props) => {
  const { name, isOpen, onCancel } = props;
  const [newName, setNewName] = useState();

  const handleClose = () => {
    onCancel();
  };

  return (
    <>
      <ReactModal
        isOpen={isOpen}
        style={{
          overlay: {
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: "rgba(255, 255, 255, 0.75)",
          },
          content: {
            width: "340px",
            height: "400px",
            position: "absolute",
            top: "40%",
            left: " 50%",
            transform: "translate(-50%, -50%)",
            border: "1px solid #eee",
            borderRadius: "15px",
            background: "#fff",
            overflow: "auto",
            WebkitOverflowScrolling: "touch",
            outline: "none",
            padding: "20px",
            textAlign: "center",
          },
        }}
      >
        <ExtraIcon>
          {icons.map((item, i) => {
            return (
              <Image
                size="80"
                shape="circle"
                src={item}
                key={i}
                _className="icons"
              />
            );
          })}
        </ExtraIcon>
        <NameInput
          type="text"
          className="inputform"
          defaultValue={name}
          onChange={(e) => setNewName(e.target.value)}
        />
        <BtnBox>
          <Btn onClick={handleClose}>완료</Btn>
          <Btn onClick={handleClose}>닫기</Btn>
        </BtnBox>
      </ReactModal>
    </>
  );
};

 

📍 react-modal을 인라인 스타일로 css를 할 수 있답니다. 저는 위치랑 사이즈를 바로 잡아줬어요. 따로 div를 이용해서 모달창을 만들면 position을 써야하는 번잡함이 있는데, 모달 라이브러리 쓰면 편합니다.

 

📍 overly로 모달창 아래로 깔리는 박스도 잡아 줄 수 있답니다

 

📍 모달창 안에 들어가는 레이아웃들의 css는 classname을 사용해서는 안 된답니다. styled-component를 이용해서 css를 해주세요!

 

📍 이 외에도 공식문서를 보시면 다양한 속성들이 마련되어있답니다. 필요하신 부분들을 찾아서 쓰시면 됩니다!