[React] 커스텀 모달 만들기

Today, What I learned?

프로젝트의 공용 모달을 활용하려고 했지만 👀

그래도 활용할 수 없는 형태라 또 다른 커스텀 모달을 만들어 보기로 했다.

더불어 공용 모달을 어떻게 만들 수 있을지?? 지난 프로젝트에서 많이 고민했었는데 이번 프로젝트에서는 멋지게 구현해 준 팀원 분이 있어서!.. 많이 배웠다 😇 그래서 오늘은 모달에 대해 정리해 본다.

 

 

useModal hook

모달을 공통적으로 쓰려면 일단 모달이 열리고 닫히는 상태를 관리해주어야 한다.

이를 위해서 보통 커스텀 훅으로 모달 상태를 관리한다. 상태를 변경해 주는 함수 같은 것을 만들어주어 관리한다.
또 여기에 onClick 이벤트나 onChange 이벤트처럼 필요한 것들을 추가해 준다.

const useModal = (initialValue: boolean) => {
  const [isOpen, setIsOpen] = useState<boolean>(initialValue);

  const handleModalStateChange = useCallback(() => {
    setIsOpen((prev: boolean) => !prev);
  }, [setIsOpen]);

...

전역으로 어디에서나 열려야 한다면 이 상태는 redux나.. recoil 등의 상태관리 라이브러리를 이용해 전역으로 관리해주어야 한다. 👀

공통적으로 사용되는 모달 컴포넌트에 상태들과 필요한 함수들을 props로 전달해 주는 형태로 사용!

 

 

커스텀 모달

커스텀 모달도 우선 열리고 닫힐 수 있는 상태가 관리되어야 한다.

모달 컴포넌트에도 필요한 props들을 전달해 준다.

...
 <ProfileImgEditButton onClick={profileModalStateChange}>
        <EditIcon />
      </ProfileImgEditButton>

      <ProfileImageModal
        currentProfile={profileImg}
        isOpen={isProfileModalOpen}
        onChangeEvent={onChange}
        onDeleteEvent={onDelete}
        handleModalStateChange={profileModalStateChange}
      />

 

모달창하면 딤처리된 레이어(백드롭)와 컨테이너가 있어야 하니.. 👀
isOpen 을 통해서 모달창이 보일 수 있도록 한다.

 <ModalBackDrop isOpen={isOpen}>
      <ModalContainer isOpen={isOpen}>
        ...
          <ModalButton onClick={handleProfileDeleteClick}>
            프로필 삭제
          </ModalButton>
          <ModalButton onClick={handleProfileEditClick} isConfirm={true}>
            프로필 수정
          </ModalButton>
        </ModalButtonContainer>
      </ModalContainer>
    </ModalBackDrop>
  );

 

그럼 이렇게 잘 보인다!..