Devlog) 컴포넌트 재사용하기

미리 만들어 둔 컴포넌트를 다른 곳에서 재사용해야 하는 이슈가 발생했다.
애초에 재사용을 염두에 두고 만들어 둔 컴포넌트가 아니었기 때문에, API호출도 해당 컴포넌트 내부에서 해주었고, 여러 기능들을 해당 컴포넌트 내부에서 작성해주었었다.

하지만, 컴포넌트를 사용하는 위치에 따라서 submit이벤트가 달라야 하고, delete이벤트도 달라야 하는 문제가 생겼다.

원래 컴포넌트를 사용하는 부분에선 submit, delete시 mutate가 일어나야 하고, 새로 사용하는 부분에서는 form만 업데이트 해주면 됐다.

컴포넌트를 재사용 하기 위해 수정할 때 적용할 수 있는 컴포넌트 설계에 대해서 생각해보는 시간을 가졌다.

1. 공통으로 수행하는 것(해야하는 역할)을 구분할 것
   -> 모든 기능이 컴포넌트에 종속되어 있으면 재사용과 확장이 용이하지 않게 될 수 있다. 때에 따라선 모든 기능을 컴포넌트에 종속시키는 게 방법일 수 있지만, 나의 경우는 몇 가지 기능을 분리시켜야 해당 컴포넌트를 재사용할 수 있었다.
2. 해당 컴포넌트를 사용하는 컴포넌트들과의 연계를 살펴볼 것
   -> 컴포넌트들간의 연계 관계를 살펴보고, props로 받을 수 있는 부분이 어디인 지 살펴본다.

위의 내용을 고려했을 때, 기능을 컴포넌트를 사용하는 부분에서 정의해서 내려받도록 해주는 걸로 결정이 되었다.

interface LabelAssignModalProps extends ModalProps {
  visible: boolean;
  onSubmit: (labels: ViewLabelsDto[]) => void;
  onClose: () => void;
}

export function LabelAssignModal({
  visible,
  onSubmit,
  onClose,
}: DocumentLabelAssignModalProps): ReactElement {
  return (
    <Modal
      modalWidth={600}
      modalHeight={900}
      modalHeader={
        <Translate
          messageKey={componentWorkflow.UserDraftRecentLabelMappingTooltip}
        />
      }
      visible={visible}
      close={onClose}
    >
      <LabelAssignModalBody onCancel={onClose} onSubmit={onSubmit} />
    </Modal>
  );
}

이렇게 라벨 할당 모달에서는 onSubmit과 onClose를 라벨할당 모달을 사용하는 쪽에서 정의해 내려받는 것으로 해주었다.
왜냐면 onSubmit과 onClose시에 선택한 라벨이 저장되어야 하는 기능은 동일한데, 저장할 때 취하는 액션이 다르기 때문이었다. 하나는 api요청을 해야하고, 하나는 form만 업데이트 시켜주면 되었기 때문이다. 이렇게 액션을 분리해주기 위해서 기능을 사용하는 쪽에서 정의해서 내려주었고, 이렇게 고치기 위해서 interface를 수정해주고, 연계된 부분을 찾아서 수정해주었다.