🟦 [React] 모달 창 띄우기2_코드 재사용화, 컴포넌트화 시키기

Modal.jsx 👇

import './Modal.css'

const Modal = ({ isOpen, onClose, title, content, onBtn = [], width, height }) => {
  if(!isOpen) return null;

  return (
    <div className="modal">
      <div className="modal_inner">
        <div className="modal_content" style={{ width, height }}>
          <div className="modal_header">
            <span className="close" onClick={onClose}>&times;</span>
            <div className="modal_title">{title}</div>
          </div>
          <div className="modal_body">{content}</div>
          <div className="modal_footer">
            {onBtn.map((btn, index) => (
                <button
                  key={index}
                  className={`btn btn_style1 modal_confirm ${btn.class}`}
                  onClick={btn.onClick}
                >{btn.text}</button>
              ))
            }
          </div>
        </div>
      </div>
    </div>
  )
}

export default Modal;

 

📌 props 배열로 받아오기

const Modal = ({ content, onBtn = [ ] }) => {
 return (
      <div className="modal_body">{content}</div>
          <div className="modal_footer">
            {
              onBtn.map((btn, index) => (
                <button
                  key={index}
                  className={`btn btn_style1 modal_confirm ${btn.class}`}
                  onClick={btn.onClick}
                >{btn.text}</button>
              ))
            }
          </div>

     </div>
)

 

---

App.jsx 👇

import { useState } from 'react'
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState({
    modal1: false,
    modal2: false
  });

  const handleOpenModal = (modalName) => {
    setIsModalOpen((prev) => ({...prev, [modalName]: true}));
  };

  const handleCloseModal = (modalName) => {
    setIsModalOpen((prev) => ({...prev, [modalName]: false}));
  };

  return (
    <>
      <div>
        <h1>React Modal</h1>
        <button onClick={() => handleOpenModal('modal1')}>버튼</button>
        <button onClick={() => handleOpenModal('modal2')}>버튼2</button>

        <Modal
          isOpen={isModalOpen.modal1} // 현재 값(false)을 넣어줘야 화면에 안뜨기 때문에 상태값을 넣어줌
          onClose={() => handleCloseModal('modal1')}
          title="타이틀"
          content={<div className="modal_inquiry_result">등록 완료 되었습니다.</div>}
          onBtn={[
            { text: "확인", class: "pos", onClick: () => handleCloseModal('modal1') },
            { text: "취소", class: "neg", onClick: () => handleCloseModal('modal1') },
            { text: "기본", onClick: () => handleCloseModal('modal1') }
          ]}
          width="400px"
          height="initial"
        />

        <Modal
          isOpen={isModalOpen.modal2}
          onClose={() => handleCloseModal('modal2')}
          title="두번째 모달"
          content={<div className="modal_inquiry_result">두번째 테스트 모달</div>}
          onBtn={[
            { text: "확인", class: "pos", onClick: () => handleCloseModal('modal2') }
          ]}
          width="400px"
          height="initial"
        />
      </div>
    </>
  )
}

export default App

📌 useState 상태 배열로 관리하기 (한개의 state로 여러개 관리)

기본
const [isModalOpen, setIsModalOpen] = useState(false);

 

여러개 (배열 사용)

const [isModalOpen, setIsModalOpen] = useState({
    modal1: false,
    modal2: false
 });

📌 함수에서 useState 상태 값 여러개 받아오기

기본
const handleOpenModal = () => {
    setIsModalOpen(false);
 };

 

여러개 (배열 사용)

const handleOpenModal = (modalName) => {
    setIsModalOpen((prev) => ({...prev, [modalName]: true}));
};

❓ 차이점

<Modal isOpen={isModalOpen.modal2} 와 onClose={() => handleCloseModal('modal2')} 가 다르게 쓰이는 이유?

👩🏻

isOpen={isModalOpen.modal2} => 현재 상태 반환 (false를 가지고 있어야 기본 상태일 때 보이지 않기 때문)

onClose={() => handleCloseModal('modal2')} => 현재 상태를 변경한 상태를 반환

---