Recoil을 활용하여 팝업 공통화하기

기존에 코드를 작성할때 컴포넌트마다 팝업을 만들거나 index.tsx에 팝업을 만들어 props로 보내는 작업을 종종했었는데 상태관리를 적용해놓고 왜 공통화를 못했을까라는 생각이 들어서 이번 기회에 공통화 작업을 하면서 문서로 정리해보기로 한다.

 

예시로 만드는 팝업은 4개로 간주한다. 

 

먼저 전역에 GlobalMoal를 만든다.

GlobalModal.tsx

export const MODAL_TYPES = {
  CouponModal: 'CouponModal',
  OptionModal: 'OptionModal',
  OrderDelConfirm: 'OrderDelConfirm',
  OrderModal: 'OrderModal',
} as const

const MODAL_COMPONENTS: any = {
  [MODAL_TYPES.CouponModal]: CouponModal,
  [MODAL_TYPES.OptionModal]: OptionModal,
  [MODAL_TYPES.OrderDelConfirm]: OrderDelConfirm,
  [MODAL_TYPES.OrderModal]: OrderModal,
}

const GlobalModal = () => {
  const { modalType, modalProps } = useRecoilState(modalState)[0] || {}

  const renderComponent = () => {
    if (!modalType) {
      return null
    }
    const ModalComponent = MODAL_COMPONENTS[modalType]

    return <ModalComponent {...modalProps} />
  }

  return <>{renderComponent()}</>
}

 팝업을 호출할때 _index.tsx에서 선언한  GlobalMoal에서 팝업을 호출할수 있게 작업 해준다.

store / atoms / modal.ts

const { CouponModal, OptionModal, OrderDelConfirm, OrderModal } = MODAL_TYPES
export interface CouponModalType {
  modalType: typeof CouponModal
  modalProps: CouponModalProps
}

export interface OptionModalType {
  modalType: typeof OptionModal
  modalProps: OptionModalProps
}
export interface OrderDelConfirmType {
  modalType: typeof OrderDelConfirm
  modalProps: OrderDelConfirmProps
}

export interface OrderModalType {
  modalType: typeof OrderModal
  modalProps: OrderModalProps
}

export type ModalType =
  | CouponModalType
  | OptionModalType
  | OrderDelConfirmType
  | OrderModalType

export const modalState = atom<ModalType | null>({
  key: 'modalState',
  default: null,
})

그다음 store단에서 모달.ts을 선언하여 각 팝업의 타입과 Props를 recoil로 상태를 관리하게 만든다.

 

useModal.tx
const [modal, setModal] = useRecoilState(modalState)

const showModal = (modalData: ModalType) => {
  setModal(modalData)
}

const hideModal = () => {
  setModal(null)
}

return {
  modal,
  setModal,
  showModal,
  hideModal,
}

다음으로는 useModal을 hooks으로 만들어서 showModal과 hideModal을 함수를 만들고 showModal으로 모달 타입과 Props를 넣어 호출하고 hideModal으로 팝업을 닫게 만들었습니다.

 

 const { showModal } = useModal()
 
const OptionModalOpen = () => {
  showModal({
    modalType: 'OptionModal',
    modalProps: {
      option: options,
      open: true,
      seleteProduct: seleteProduct,
    },
  })
}

팝업을 호출할때는 다음과 같이 코드를 넣고 Props를 활용하여 팝업 내용이나 다양한 상태를 삽입 할수 있습니다.