[React] Modal 사용하여 팝업창 만들기

설치하기

npm install react-modal

위와 같이 설치했는데 오류가 걸리는 경우가 존재한다. 내가 그랬기 때문이다.

npm i --save-dev @types/react-modal

타입 정의 라이브러리를 사용하면 오류가 나지 않는다.

import하기

import Modal from 'react-modal';

import를 해주고 modal을 사용해주면 된다.

반응형

useState 셋팅해주기

나의 경우에 button을 클릭했을 때 modal을 보여주게 하고 싶기에 변수를 button과 modal을 연결해놓으면 된다.

import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  return (
    <>
      <button onClick={()=> setModalIsOpen(true)}>모달열기</button>
      <Modal isOpen={true} style={customModalStyles}>
        모달안의 내용
        <button onClick={()=> setModalIsOpen(false)}>모달닫기</button>
      </Modal>
    </>
  )
}

react-modal의 기능

이름	기능
isOpen	모달 창이 표시되어야 하는지 여부를 설명하는 boolean 값이다.즉, 해당 값이 true여야 모달 창이 열리는 것이다.
onRequestClose	모달이 닫힐 때 실행될 함수를 의미한다.즉,사용자가 모달을 닫으려고 할 때 실행되는 함수이다.
style	모달 창과 모달 창 바깥에 대한 style을 지정해준다.
ariaHideApp	appElement를 숨길지 여부를 나타내는 boolean 값입니다.이 값이 true이면 appElement가 숨겨준다.
contentLabel	스크린리더 사용자에게 콘텐츠를 전달할 때사용되는 방법을 나타내는 문자열이다.
shouldCloseOnOverlayClick	팝업창이 아닌 바깥 부분에서 클릭하였을 때,닫히도록 할 것인지에 대한 처리이다. 기본값으로는 true를 가지고 있다.

팝업창 커스텀하기

const customModalStyles: ReactModal.Styles = {
  overlay: {
    backgroundColor: " rgba(0, 0, 0, 0.4)",
    width: "100%",
    height: "100vh",
    zIndex: "10",
    position: "fixed",
    top: "0",
    left: "0",
  },
  content: {
    width: "360px",
    height: "180px",
    zIndex: "150",
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    borderRadius: "10px",
    boxShadow: "2px 2px 2px rgba(0, 0, 0, 0.25)",
    backgroundColor: "white",
    justifyContent: "center",
    overflow: "auto",
  },
};

• overlay : 팝업창 바깥 부분 css
• content : 팝업창의 css

이렇게 css를 설정하고 나서 form으로 하여 팝업창을 꾸몄다. 이는 antd라고 치면 관련 코드가 많이 나오니 따로 사이트를 남겨놓도록 하겠다.

Form - Ant Design

Form - Ant Design

결과물

결과물

위와 같이 다 따라 하면 위와 같은 결과물이 나온다.

👇🏻 참고

https://velog.io/@jaeochoiii/React-Modal-사용하여-팝업창-띄우기

https://velog.io/@mingle_1017/React-모달-창-구현해보기라이브러리-react-modal