[React] modal 구현하기

🔎 모달 구현하기

공지글 목록이 있으며, 공지를 클릭하면 해당 공지사항이 나오는 모달을 구현하려고 한다.

모달 구현의 큰 틀은 true이면 해당 컴포넌트가 나오도록 하는 것이다.

데이터가 변하지 않는 모달

모달이 보일지 안 보일지만 결정해주면 된다.
여기서는 writeModal이 true이면 모달이 보이고, false이면 보이지 않는다.
그렇기 때문에 closeModal이라는 변수로 useState함수를 넘겨주고, 모달에서 닫기를 눌러주면 false로 state를 바꿔주면 된다.

const [writeModal, setWriteModal] = useState(false);

retrun (
	{writeModal && <NewNoticeModal closeModal={setWriteModal}/>}
)

데이터가 다른 모달 (모달 데이터에 순서가 있는 경우)

 const [modalOpen, setModalOpen] = useState({});

    const toggleModal = (noticeId) => {
      setModalOpen(prevState => ({
        ...prevState,
        [noticeId]: !prevState[noticeId] || false,
      }));
    };

	return (
      {probs.notices.map((notice)=>(
                <div key={notice.id}>
                    <button className="list-btn" onClick={() => toggleModal(notice.id)}>{notice.title}</button>
                    {modalOpen[notice.id] && <NoticeDetailModal noticeId = {notice.id}
                                                      title={notice.title} content={notice.content}
                                                      date={notice.updated_at}
                                                      closeModal={toggleModal} isLeader={userId===probs.leader}/>}
                </div>
      ))}
)

모달에 띄울 데이터의 id를 key로 두고, 표시 여부를 value로 둔다.
그리고 toggleModal()을 만들어서 공지를 클릭했을 때 id를 입력받아 다른 모달은 그대로 두고, 해당 공지의 모달만 조작한다.

id를 받아 조작해주지 않으면 어떤 모달을 클릭하던지 같은 데이터의 값만 나온다..

/* modal css 설정 */
.my-modal{
    padding: 5px;
    width: 50%;
    height: 50%;
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }