[React 함수형] Modal을 이용해서 팝업창 띄우기

우선 파일을 설치해야한다.

터미널을 열고

yarn add react-modal

npm install react-modal

둘 중 하나를 사용하면 된다.

 

이후 modal을 사용할 jsx에서 import하기

import Modal from 'react-modal';

 

Modal 사용법

isOpen= {Boolean}

//<Modal isOpen={Boolean}> 내용~ </Modal>

//예시
<Modal isOpen={true}> 내용~ </Modal>

이때 true면 팝업창이 뜨고, false이면 닫힌다.

 

이를 useState를 이용하면 끄고 닫는 버튼을 만들 수 있다.

useState를 이용한 열기 닫기

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

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <>
      <button onClick={()=> setModalOpen(true)}>Modal Open</button>
      <Modal isOpen={true}>
       Modal 내용
        <button onClick={()=> setModalOpen(false)}>Modal Open</button>
      </Modal>
    </>
  )
}

Modal Open을 누르면 아래와 같이 팝업창이 뜨고, 안에  작성한 Modal 내용을 볼 수 있다.

그리고  <Modal> </Modal> 사이에 버튼을 넣어서 닫을 수 있게 했다.

 

onRequestClose를 이용한 열기 닫기

팝업창을 닫기 버튼으로만 닫을 수 있으면 불편하다. 보편적으로 팝업창  밖을 클릭하거나 esc를 이용해서 닫는 경우가 많은데, 이때 사용하는 onRequestClose이다.

공식문서 : https://reactcommunity.org/react-modal/examples/on_request_close/

이를 이용하여 코드를 짜면 다음과 같다.

 const [modalOpen, setModalOpen] = useState(false);
  return (
    <>
      <button onClick={() => setModalOpen(true)}>Modal Open</button>
      <Modal isOpen={modalOpen} onRequestClose={() => setModalOpen(false)}>
        Mordal 이라는 팝업창 내부의 내용입니다
      </Modal>
    </>
  );

버튼을 통해서 modalOpen을 true만들어서 팝업창을 연다

이후 onRequestClose 콜백함수를 사용하여, 닫기 기능을 만든다.

 

 

Modal 에 css 적용하기

 <Modal
            style={{
              content: {
                position: "fixed",
                // top: 0,
                // left: 0,
                // right: 0,
                // bottom: 0,
                marginLeft: "auto",
                marginRight: "auto",
                border: "1px solid #ccc",
                width: "500px",
                marginTop: "200px",
                // height: "300px",
                borderRadius: "4px",
                padding: "20px",
              },
            }}
            isOpen={modalOpen}
            onRequestClose={() => setModalOpen(false)}
          >
            <MainButton onClick={() => setModalOpen(false)}>
              Modal Close
            </MainButton>
          </Modal>

앞선 기능들을 적용하고 style을 통해서 css를 적용시켰다.

모달에는 기본적으로 default로 설정된 값들이 있다. 

 

 

Modal에는 기본 default 값들이 있다. 아래링크에서 확인하면 된다.

추가적으로 css를 넣고 싶을때는 키값 : "value"  를 style안에 입력하면 된다.

https://reactcommunity.org/react-modal/styles/