[React] 간단한 모달 띄우기

리액트 모달 띄우기

react-modal 라이브러리를 활용한 간단한 모달 띄우기

 

---

react-modal 설치

npm install react-modal

 

---

Modal 컴포넌트 설치

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

const ModalExample = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>모달 열기</button>
      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <h2>모달 제목</h2>
        <p>모달 내용</p>
        <button onClick={closeModal}>닫기</button>
      </Modal>
    </div>
  );
};

export default ModalExample;

 

---

모달 띄우기

import React from 'react';
import ModalExample from './ModalExample';

const App = () => {
  return (
    <div>
      <h1>애플리케이션</h1>
      <ModalExample />
    </div>
  );
};

export default App;