Mock Mutate로 API 연동시 코드수정 줄이기

똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11

 

이전에 한글코딩(링크넣자)으로 서버 API가 늦게 나왔을 때 퍼블리싱 단계에서 고민이 일부 해결되었지만, 또 다른 문제가 생겼습니다.

저는 보통 퍼블리싱 단계에서도 API 통신 부분을 제외하고는 각 컴포넌트의 상태 설계와 로직을 대부분 구현해 놓습니다.

 

단순히 레이아웃과 스타일링만 하는 것 보다 시간은 더 걸리지만 이렇게 했을 때 API연결시 고려할 부분이 확 줄어들기도 하고,

디자이너나 PM 분들께 미리 전달하여 기획 요구사항이 명확하게 구현되었는지도 미리 피드백을 받을 수 있습니다.

 

그러나 실제로 API를 붙여보니 예상보다 API 연결 시간이 훨씬 더 소요되었습니다.

이유는 React Query 사용으로 인해 코드 구조가 대부분 변경되기 때문 이었습니다.

 

예시 코드로 보겠습니다.

아래 코드는 이메일 전송 버튼을 눌렀을 때 동작이며, 퍼블리싱 단계입니다.

 const onClickSendEmail = useCallback(() => {
   // 1. 요휴성 검증 로직
   const isValid = true;
    if (isValid) {
      openToast({
        type: 'error',
        description: '올바른 형식의 이메일을 입력해주세요.',
      });
      return;
    }

    // P_TODO: 2. API 호출 (mutate 적용 예정이므로 try/catch 사용하지 않음.)

    // 3. API 호출 성공 이후.
    openToast({
      description: '해당 이메일로 전송이 완료되었어요.',
    });
  }, [openToast]);

 

이렇게 

1. client 단의 유효성 검사

2. API 호출 (주석 후 비워놓음)

3. API 호출 이후 로직 (feedback, clear)

 

의 단계로 작성해 놓습니다.

 

그러나 이 코드에서 React Query를 사용해서 실제 코드를 붙이게 되면 다음과 같이 구조가 변합니다.

 

const { mutate: sendEamilMutate } = useSendEmailMutation({
        options: {
        onError: (err: Error) => {
            // 4. 에러처리
        },
        // 3. mutate onSuccess 안으로 이후 로직이 이동되고
        onSuccess: (data) => {
           openToast({
            description: '해당 이메일로 예약확인서 전송이 완료되었어요.',
        });
        },
    },
});

const onClickSendEmail = useCallback(() => {
   // 1. 요휴성 검증 로직
   const isValid = true;
    if (isValid) {
      openToast({
        type: 'error',
        description: '올바른 형식의 이메일을 입력해주세요.',
      });
      return;
    }

    // 2. 개별 예약확인서 전송 API 호출
    sendEamilMutate({...})
  }, [openToast]);

 

내부 코드 로직 자체가 변경 되진 않았지만 API 호출 이후 로직이 전부 useMutation내부 인자로 옮겨졌습니다.

저희 내부 컨벤션상 항상 핸들러 이벤트가 mutaion 아래에 위치하게 됩니다.

한 두개의 API 호출이라면 큰 변화가 아닐 수 있지만, 각 각 호출해야하는 API가 많은 페이지는 충분히 헷갈릴 수 있을 만한 변화입니다.

 

때문에 아래와 같은 useMockMutation 이라는 Hooks 만들었습니다.

interface MockFuncProps {
  errorRatio?: number;
  data?: any;
}

const mockFunc = async (params?: MockFuncProps) => {
  const isError = (await Math.random()) < (params?.errorRatio || 0);
  if (isError) throw isError;
  return isError;
};

export const useMockMutate = (
  params?: UseMutationParams<(params?: MockFuncProps) => Promise<boolean>>,
) => {
  return useMutation(mockFunc, {
    ...params?.options,
  });
};

 

const { mutate } = useMockMuation({
        options: {
        onError: (err: Error) => {
            // 4. 에러처리
        },
        // 3. mutate onSuccess 안으로 이후 로직이 이동되고
        onSuccess: (data) => {
           openToast({
            description: '해당 이메일로 전송이 완료되었어요.',
        });
        },
    },
});

const onClickSendEmail = useCallback(() => {
   // 1. 요휴성 검증 로직
   const isValid = true;
    if (isValid) {
      openToast({
        type: 'error',
        description: '올바른 형식의 이메일을 입력해주세요.',
      });
      return;
    }

    // 2. 개별 예약확인서 전송 API 호출
    mutate({...})
  }, [openToast]);

 

 

이렇게 MockMutaiton을 사용하게 되면 추후 코드 변경점이 획기적으로 줄어듭니다.

보내는 인자나 에러처리 정도만 추가한다면 API연동을 간편하게 끝낼 수 있습니다.

 

물론 제가 진행한 환경처럼 API가 매우 나오는 환경은 드물겠지만, 일정상 미리 퍼블리싱을 진행해야 하는 상황이라면 매우 유용했습니다.

다른 분들의 노하우는 어떤 것이 있나요?