[CSS] react-modal 라이브러리 사용하기

설치 및 옵션

npm i react-modal
npm i @types/react-modal

이름	기능
isOpen	모달 창이 표시되어야 하는지 여부를 설명하는 boolean 값이다.즉, 해당 값이 true여야 모달 창이 열리는 것이다.
onRequestClose	모달이 닫힐 때 실행될 함수를 의미한다.즉,사용자가 모달을 닫으려고 할 때 실행되는 함수이다.
style	모달 창과 모달 창 바깥에 대한 style을 지정해준다.
ariaHideApp	appElement를 숨길지 여부를 나타내는 boolean 값입니다.이 값이 true이면 appElement가 숨겨준다.
contentLabel	스크린리더 사용자에게 콘텐츠를 전달할 때사용되는 방법을 나타내는 문자열이다.
shouldCloseOnOverlayClick	팝업창이 아닌 바깥 부분에서 클릭하였을 때,닫히도록 할 것인지에 대한 처리이다.기본값으로는 true를 가지고 있다.

사용하기

1. Modal.tsx

import Modal from "react-modal"; 와 같이 선언

import React from "react";
import Modal from "react-modal";

type ModalProps = {
  children?: React.ReactNode;
  isOpen: boolean;
  onRequestClose: () => void;
  style: ReactModal.Styles;
};

const CommonModal = ({
  children,
  isOpen,
  onRequestClose,
  style,
}: ModalProps) => {
  return (
    <Modal
      isOpen={isOpen}
      style={style}
      onRequestClose={onRequestClose}
      ariaHideApp={false}>
      {children}
    </Modal>
  );
};

export default CommonModal;

2. DetailModal.tsx

"use client";

import React, { useEffect } from "react";

import styles from "../../styles/pages/detail.module.scss";
import CommonModal from "@/components/common/Modal";

type DetailModalProps = {
  modalOpen: boolean;
  setModalOpen: (isOpen: boolean) => void;
};

const DetailModal = ({ modalOpen, setModalOpen }: DetailModalProps) => {
  useEffect(() => {
    if (modalOpen) {
      // 모달이 열릴 때 API 호출
      fetchData();
    }
  }, [modalOpen]);

  const fetchData = async () => {
    const response = await fetch("/api/data");
    const data = await response.json();
    console.log(data);
  };

  return (
    <CommonModal
      isOpen={modalOpen}
      onRequestClose={() => setModalOpen(false)}
      style={styles}>
      <div>API 데이터 불러오는 영역</div>
    </CommonModal>
  );
};

export default DetailModal;

💡
여러 곳에서 동일한 구조 사용 : CommonModal
특정 페이지에서만 사용하는 스타일, 기능 필요 : DetailModal (with CommonModal inside)

참고자료
공식문서 : https://reactcommunity.org/react-modal/