React modal 구현

웹사이트를 개발하다보면 팝업 및 모달창을 사용하는 경우가 매우 많다.

모달을 만들수있는 방법은 매우 다양하다.

이번 글에서는 라이브러리를 사용해서 만드는 방법에 대해 알아보려한다.

우선 react-modal 를 통해 만들어보려한다.

react-modal을 선정한 이유는 다음과 같다.

react-modal같은 경우는 npm 라이브러리에서 주간 다운로드수가 압도적으로 많고 깃허브가 꾸준히 업데이트 되면서도 제일 중요한 편리함이 좋아서이다.

react-modal
설치하기

npm i react-modal

yarn add react-modal

기본 사용법

// 사용할 위치에서 import해주자
import Modal from 'react-modal';

모달의 상태 관리
기본적으로 modal은 버튼 클릭시 유저에게 모달창을 띄워주는것이기에 보여줄 모달창은 useState로 상태관리를한다.

// modal이 안보일때는 false, 보일때는 true값으로 상태관리
const [modalIsOpen, setIsOpen] = React.useState(false);

// 함수가 실행될때 modal의 상태를 true로 바꿔준다.
  function openModal() {
    setIsOpen(true);
  }

// 함수가 실행될때 modal의 상태를 false로 바꿔준다.
  function closeModal() {
    setIsOpen(false);
  }

코드에 적용하기

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

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  
  function openModal() {
    setIsOpen(true);
  }

function closeModal() {
    setIsOpen(false);
  }
  return (
    <>
    // 버튼을 클릭 시 openModal 함수가 실행되며 모달이 보임
      <button onClick={openModal}>Modal Open</button>
      // 모달창에 원하는 내용을 입력해보자
      <Modal isOpen={true}>
        This is Modal content
        // 버튼을 클릭시 closeModal 함수가 실행되며 모달을 종료시킴
        <button onClick={closeModal}>close</button>
      </Modal>
    </>
  )
}

위와 같이 기본적인 modal을 만들었다면 console에서 아래와 같은 에러를 볼 수 있을것이다.

모달이 열려있을 때 #root 엘리먼트를 숨겨주어야 하기 때문에 아래와 같이 코드를 작성해서 해결할 수 있다.

// index.js

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

// App.js
Modal.setAppElement('#root')

커스텀해보기

위와같이 간단하게 모달을 만들었지만 모달의 밖을 클릭했을 때 모달이 종료되지않아 난감할 수 있다.

다음과 같이 설정해서 해결할 수 있다.

<Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
      >

또한 모달의 스타일을 변경하고싶다면 style 속성에 content와 overlay 키를 활용하여 각각 스타일링 할 수 있다.

기본 스타일은 Modal.defaultStyles 객체에 정의되어있으며 아래와 같다.

<Modal
  ...
  style={{
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(255, 255, 255, 0.75)'
    },
    content: {
      position: 'absolute',
      top: '40px',
      left: '40px',
      right: '40px',
      bottom: '40px',
      border: '1px solid #ccc',
      background: '#fff',
      overflow: 'auto',
      WebkitOverflowScrolling: 'touch',
      borderRadius: '4px',
      outline: 'none',
      padding: '20px'
    }
  }}
  ...
>

참고한 곳 : https://www.npmjs.com/package/react-modal, https://reactcommunity.org/react-modal/