[React] Modal 사용하여 팝업창 띄우기

알림기능을 구현할 때, 혹은 스케쥴에 있는 어떤 항목을 클릭했을 때마다 라우터를 이용하여 다른 페이지로 넘어가는 것은 너무 소모가 크다. 만약 페이지 이동이 아니라 팝업창을 띄운다면 간편하지 않을까?

처음에는 팝업창을 css로 박스형태 구현을 해야하나 복잡했으나 구글링을 해보니 Modal 라이브러리를 이용하면 이를 보다 쉽게 구현할 수 있었다.

npm install react-modal

이것을 터미널에 입력하면 우리는 모달 라이브러리를 이용할 수 있다.

Modal을 사용할 것이므로 import를 해준다.

import Modal from 'react-modal';

이렇게 하면 우리는 Modal을 사용할 수 있게 된다.

isOpen= {Boolean}

---

Modal이라는 객체는 isOpen을 필수적으로 가지고 있어야 한다.
isOpen의 값은 무조건 불리언 값인 true / false 이어야 한다.

function App() {
  return (
    <Modal isOpen={true}>
      This is Modal content
    </Modal>
  )
}

이것을 false값으로 바꾼다면 Modal 창은 화면에 띄워지지 않는다.

useState를 이용하여 팝업 창 컨트롤 하기

제일 먼저 useState를 import 해주고

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

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  return (
    <>
      <button onClick={()=> setModalIsOpen(true)}>Modal Open</button>
      <Modal isOpen={true}>
        This is Modal content
        <button onClick={()=> setModalIsOpen(false)}>Modal Open</button>
      </Modal>
    </>
  )
}  

기본 값은 팝업 창이 띄워지지 않는 상태인 false 값으로 디폴트 값 설정을 해준다.
onClick 함수를 이용하여 isOpen이 true가 될 경우 팝업창을 띄우고 팜업 창에 있는 버튼을 이용하여 falsef를 만들어줄 수도 있게 된다.

onRequestClose={callback} 이용하여 팝업 창 닫기

지금은 버튼을 이용하여 팝업 창을 닫을 수 있지만 보통은 닫기 버튼이 아니라 오버레이가 되어있는 부분을 선택하거나 esc 키보드 버튼을 눌렀을 경우에도 창이 닫힐 수가 있다. 그것을 사용하는 방법이 onRequestClose={callback} 을 사용하면 된다.

onRequestClose 속성값으로 isOpen 속성값을 false로 바꿔주는 콜백함수를 주면 된다.

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

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  return (
    <>
      <button onClick={()=> setModalIsOpen(true)}>Modal Open</button>
	  <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)}>
      	This is Modal content
      </Modal>
    </>
  )
}