Modal 컴포넌트를 만든 방법과 찾은 개선점 및 리팩토링

문제점

요구사항

 

위처럼 6개의 모달을 만들어야 했다.

 

내가 모달을 만든 방법

export const Modal = ({
  modalRef,
  openModal,
  handleModalClose,
  children,
}: Props) => {
  if (!openModal) {
    return <></>;
  }

  return (
    <>
      <div id={styles.backdrop}>.</div>
      <div className={styles.container}>
        <div className={styles.modal} ref={modalRef}>
          <button className={styles.closeBtn} onClick={handleModalClose}>
            <ImCross />
          </button>
          {children}
        </div>
      </div>
    </>
  );
};

 

위의 modal은 여러 모달의 공통 부모 컴포넌트 역할을 하며, 모달의 공통적인 기능들을 넣어놓았다. 

모달을 여는 함수(openModal을 true로 바꾸는 함수)의 경우는 모달을 사용하는 쪽에서 만들어줘야 했다. 모달을 닫는 함수 또한 마찬가지였고, 이것들을 모달을 사용하는 쪽에서 일일이 state로 작성하는 것은 비효율적이었기 때문에 커스텀훅을 만들었다.

 

import { useRef, useState } from "react";
import useHandleOutsideClick from "./useHandleOutsideClick";

export const useModal = () => {
  const modalRef = useRef(null);
  const [openModal, setOpenModal] = useState(false);

  const handleModalOpen = () => {
    setOpenModal(true);
  };

  const handleModalClose = () => {
    setOpenModal(false);
  };

  useHandleOutsideClick(modalRef, handleModalClose);

  return {
    openModal,
    modalRef,
    handleModalOpen,
    handleModalClose,
  };
};

커스텀 훅은 위와 같이 만들어주었다.

 

  const { openModal, modalRef, handleModalClose, handleModalOpen } = useModal();
  
  //생략...
  
  return(
 	<ModalPortal>
        <DeleteModal
          ref={modalRef}
          openModal={openModal}
          handleModalClose={handleModalClose}
          title="폴더 삭제"
          description={folderName}
        />
      </ModalPortal>
  )

모달을 사용하는 곳 ( 모달을 띄우는 버튼이 있는 곳)에서 useModal을 통해 간편하게 모달을 제어할 수 있다는 장점이 있었다.

 

개선점

 

다만, 문제는 띄어야할 모달이 여러개일 때 위와 같이 코드가 너무 길어진다는 것이다. 위 코드는 모달의 개수가 3개 뿐이지만 더 많아지게 된다면 위와 같이 적는 것이 바람직할까? 

 

 

또한, Modal이라는 공통 부모컴포넌트가 있는데도 ModalPortal을 저렇게 따로 지정해 주었다는 것이다. 남의 코드를 보고 무조건 적으로 수용한 탓이다. 이런 버릇은 고쳐야 겠다.

 

리팩토링

첫번째 개선

export const Modal = ({
  modalRef,
  openModal,
  handleModalClose,
  children,
}: Props) => {
  if (!openModal) {
    return <></>;
  }

  return (
    <ModalPortal>
      <div id={styles.backdrop}>.</div>
      <div className={styles.container}>
        <div className={styles.modal} ref={modalRef}>
          <button className={styles.closeBtn} onClick={handleModalClose}>
            <ImCross />
          </button>
          {children}
        </div>
      </div>
    </ModalPortal>
  );
};

 

공통 모달 컴포넌트에 ModalPortal을 넣어주었다. 

 

두번째 개선

 

이 부분을 한 번 해결해보자

 

생각한 개선법

내가 생각한 개선법으로는 전역적으로 공유되는 모달의 상태를 만들고 이 모달의 상태에 따라서 Modal 컴포넌트 내부에서 여러개의 서로다른 모달을 렌더링하게 하는 것이다.  모달들을 띄워주는 컴포넌트에서는 그저 이 상태를 바꿔주면 어떨까?

 

특정 상태에 따라 서로 다른 모달 컴포넌트 렌더링하자

위에서 언급한 문제를 피하기 위해서 모든 모달들을 공통 모달 컴포넌트에서 모달 타입의 따라 조건부렌더링을 하면 되지 않을까 생각했고 그럼 모달을 사용하는 곳에서는 그 모달 타입과 모달에 필요한 데이터만 바꿔주면 될 것 같았다. 모달타입과 모달에 필요한 데이터를 전역관리하면 되는 것이었다.

 

Context API와 useReducer 사용

원래는 redux toolkit을 사용해볼까 했지만 아직은 익숙하지도 않고, context api 사용을 많이 안해보았기 때문에 context api를 사용해보기로 했다. 그리고 state를 사용하지 않고 useReducer를 사용했는데 단순히 많이 안 써봐서 연습을 하기 위해서였지만 다 만들고 나니 state대비 useReducer의 장점을 알게 되었다.

 

어떻게 구현 했나

const initialState: Type = {
  type: "",
  isOpen: false,
  data: {
    title: null,
    description: null,
    subTitle: null,
    folders: null,
    folderName: null,
    linkUrl: null,
  },
};

 

위 값을 전역에서 관리하였다. 위 데이터 자체는 Modal에서 밖에 안쓰긴 하지만 Props로 전달을 해주지 못하기 때문에 전역관리를 하였다.

 

export const Modal = () => {
  const modalData = useContext(ModalContext);
  const dispatch = useContext(ModalDispatchContext)!;

  if (!modalData.isOpen) {
    return <></>;
  }

  const handleModalRemoveClick = () => {
    dispatch({ type: "hideModal" });
  };
  
  // 이하 생략...

모달 컴포넌트에서는 전역 관리하는 데이터를 가져와 모달을 보여줄지 말지 조건부 렌더링을 하게 된다.

 

 <ModalPortal>
      <div onClick={handleModalRemoveClick} id={styles.backdrop}></div>
      <div className={styles.container}>
        <div className={styles.modal}>
          <button className={styles.closeBtn} onClick={handleModalRemoveClick}>
            <ImCross />
          </button>
          {renderComponent(modalData)}
        </div>
      </div>
  </ModalPortal>

const renderComponent = (modalData: Type): ReactNode => {
  switch (modalData.type) {
    case "AddLinkModal":
      return (
        <AddLinkModal
          folders={modalData.data.folders!}
          linkUrl={modalData.data.linkUrl!}
        />
      );
    case "AddModal":
      return <AddModal />;
    case "DeleteModal":
      return (
        <DeleteModal
          title={modalData.data.title!}
          description={modalData.data.description!}
        />
      );
    case "ModifyModal":
      return <ModifyModal folderName={modalData.data.folderName!} />;
    case "ShareModal":
      return <ShareModal folderName={modalData.data.folderName!} />;
    default:
      return <></>;
  }
};

 

위는 모달의 핵심로직이다. 전역으로 관리되는 데이터의 type을 바꿔주면 바뀐 type에 따라 다른 모달을 보여주도록 했다. 모달 저마다의 필요한 데이터도 전역으로 빼주었고 모달을 띄우는 곳에서 dispatch에 필요한 데이터를 넣어주어 각 모달에 따라 전역 데이터가  업데이트가 되도록 하였다

 

이렇게 하다보니 모달을 띄우는 컴포넌트에서는 그저 dispatch를 사용하면 되기 때문에 정말 코드가 깔끔해졌다

 

 

여기서 타입스크립트의 장점을 또 느낄 수 있었다.

 

 

이렇게 타입을 지정해놓으면 에디터가 ModalType을 선택할 수 있게 해주고, 다른 값을 넣었을 때 친절히 어떤 값 때문에  오류가 났는지 알려줬기 때문에 너무 좋았다.

 

reducer

function reducer(state: Type, action: Action) {
  switch (action.type) {
    case "showModal": {
      return {
        ...state,
        isOpen: true,
        type: action.payload.modalType,
        data: {
          ...state.data,
          ...action.payload,
        },
      };
    }
    case "hideModal": {
      return {
        ...state,
        isOpen: false,
      };
    }
    default: {
      return state;
    }
  }
}

 

느낀점

아직 이곳저곳 개선점이 많은 코드이다. 여러 사람들에 도움을 받아 정말 완성도 높은 코드로 계속 발전시켜보고 싶다는 욕심이 생겼다. (타입 부분을 많이 손봐야 될 것 같다 / 타스 잘하는 사람들에 조언을 구하자~!!)