[react] React에서 모달 팝업창을 구현하는 방법 (1/2)

React에서 모달 팝업창을 구현하는 방법은 여러 가지가 있지만, 대표적으로 다음과 같은 방법이 있습니다.

1. react-modal 라이브러리 사용

• react-modal은 React에서 모달 팝업창을 쉽게 구현할 수 있도록 도와주는 라이브러리 입니다.
• react-modal을 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다.

npm install react-modal

• Modal 컴포넌트를 생성하고, isOpen, onRequestClose 등의 props를 설정합니다.
• Modal 컴포넌트 아네 필요한 UI를 작성합니다.

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

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={isOpen}
        onRequestClose={closeModal}
      >
        <h2>Modal Title</h2>
        <p>Modal content goes here.</p>
        <button onClick={closeModal}>Close Modal</button>
      </Modal>
    </div>
  );
}

 

2. 상태(state)를 사용하여 모달 팝업창을 열고 닫습니다.

• 상태(state)를 사용하여 모달이 열려있는지 여부를 저장합니다.
• 모달이 열리면 해당 상태를 true로 설정하고, 닫히면 false로 설정합니다.
• 모달 컴포넌트를 생성하고, isOpen 상태와 onClose 함수를 props로 전달합니다.
• 모달 컴포넌트에서는 isOpen 상태를 사용하여 모달이 열려있는지 여부를 확인하고, 필요한 UI를 렌더링합니다.

import React, { useState } from 'react';

function Modal(props) {
  if (!props.isOpen) {
    return null;
  }

  return (
    <div className="modal">
      <div className="modal-content">
        <span className="close" onClick={props.onClose}>&times;</span>
        <h2>Modal Title</h2>
        <p>Modal content goes here.</p>
      </div>
    </div>
  );
}

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={closeModal} />
    </div>
  );
}

 

위의 두 가지 방법중 react-modal을 사용하면 더 쉽게 모달 팝업창을 구현할 수 있습니다.

 

 

다크 테마 때문에 코드의 가시성이 떨어질 수 있습니다. 

우측 하단의 달 모양 아이콘을 클릭하여 다크모드 해제할 수 있습니다.