미션, 디스커션 제출 로직 리팩터링 (issue #765)

[chosim-dvlpr]

구현 요약

미션, 디스커션 제출 로직을 리팩터링했습니다.

1. 기존에는 아래와 같이 미션, 디스커션 제출 페이지의 분기처리 로직이 함께 있었는데요, 이를 분리하고 하나의 공통 로직으로 추상화했습니다.

• 풀이
  MissionSubmitPage -> useSubmitSolutionHandlers -> 초깃값 설정 : useInitializeInputs, 폼 제출 : useFormSubmission

• 디스커션
  DiscussionSubmitPage -> useSubmitDiscussionHandlers -> 초깃값 설정 : useInitializeInputs, 폼 제출 : useFormSubmission

2. useCallback을 활용하여 메모이제이션을 추가했습니다.

• 리렌더링되더라도 함수 참조가 그대로 유지되고, 의존성 배열이 변경될 때만 함수 참조가 새롭게 생성되도록 합니다.
• handleFormSubmit의 재생성으로 인해 자식 컴포넌트가 리렌더링되는 것을 방지했습니다.
• setInitialInputValues의 재생성으로 인해 useEffect의 의존성 배열이 새롭게 변경되는 것을 방지했습니다.

어려웠던 점

useFormSubmission에서 patchMutation props를 받아 실행을 시켜야 했는데, Mutation 핸들러에 전달해야 하는 인자가 모두 달랐습니다. 따라서 확장성을 위해 id값만 필수적으로 받은 뒤, 나머지 props는 제네릭을 활용하여 외부에서 주입하는 것으로 구현했습니다.

interface FormSubmissionParams<T> {
  isEditMode: boolean;
  id: number;
  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
  patchMutation: (props: T) => void;
  props: T;
}

  const handleEditSubmit = useCallback(() => {
    patchMutation({
      ...props,
      id,
    });
  }, [patchMutation, props, id]);

외부에서 주입하는 경우 아래와 같이 사용 가능합니다.

  // 폼 제출 로직
  const handleFormSubmit = useFormSubmission<SolutionPatchMutationProps>({
    isEditMode,
    id: solutionId,
    handleSubmit,
    patchMutation: solutionPatchMutation,
    props: {
      solutionId,
      title: solutionTitle,
      description,
      url,
    },
  });

연관 이슈

• close 미션, 디스커션 제출 로직 리팩터링 #765

참고

코드 리뷰에 RCA 룰을 적용할 시 참고해주세요.

헤더	설명
R (Request Changes)	적극적으로 반영을 고려해주세요
C (Comment)	웬만하면 반영해주세요
A (Approve)	반영해도 좋고, 넘어가도 좋습니다. 사소한 의견입니다.