한 페이지에서 useModal 커스텀 훅 두 번 호출하기

한 페이지에 모달 2종류를 띄워야 한다.
버튼이 2개 있고, 각각 다른 모달을 띄우도록 하고 싶었다.

한 종류일 때는 다음과 같이 코드가 간단하지만..

  const { isModalVisible, openModal, closeModal } = useModal();

2개일 때는 어떻게 해야 할 지 헷갈렸다.

먼저 다음과 같이 구조분해할당 코드를 수정했다.

  const {
    isModalVisible: isPatientModalVisible, 
    openModal: openPatientModal, 
    closeModal: closePatientModal
  } = useModal();

  const {
    isModalVisible: isMateListModalVisible, 
    openModal: openMateListModal, 
    closeModal: closeMateListModal
  } = useModal();

 

이후 코드에서 이런 식으로 호출하면 된다.

      {isPatientModalVisible && <PatientDetailModal modalData={patientDetail} closeModal={closePatientModal} />}
      {isMateListModalVisible && <MateListModal modalData={mateList} closeModal={closeMateListModal} />}