‘Ask‐It’의 TanStack Query

📄 ‘Ask-It’의 TanStack Query

TanStack Query는 데이터 페칭, 캐싱, 동기화, 업데이트를 효율적으로 처리하기 위한 라이브러리로, 클라이언트 상태와 서버 상태를 명확히 분리하는 데 도움을 줍니다.

‘Ask-It’ 에서는 이 라이브러리를 데이터의 캐싱, 동기화, 업데이트를 위해 사용하지는 않지만, 상태 관리의 복잡성을 간소화하고 서버 상태를 보다 직관적으로 관리하기 위해 도입했습니다. 특히, 기존에 useEffect와 useState를 조합하여 구현했던 데이터 로드와 상태 관리 로직을 단순화하는 데 중점을 두고 있습니다.

이 문서에서는 TanStack Query를 활용한 상태 관리 복잡성 해결 과정과 그 이유를 다룹니다.

🧩 배경 및 필요성

‘Ask-It’ 의 프론트엔드는 실시간 소켓 통신으로 들어오는 데이터를 처리하기 위해 Zustand를 사용하여 상태 관리와 액션 전달을 이미 구현하고 있습니다. 하지만 사용자 요청의 중복 처리에서 문제가 발생했습니다. 특히, 데이터 변경 및 생성 요청이 반복적으로 발생하면 불필요한 서버 부하가 생기고, 동일한 데이터가 여러 번 생성되는 등 사용자 경험에 부정적인 영향을 미칠 수 있었습니다.

이로 인해 다음과 같은 요구 사항이 도출되었습니다.

중복 요청 방지
- 사용자가 동일한 요청을 반복적으로 보내지 못하도록 단일 요청만 허용.
불필요한 상태 관리 로직 최소화
- 기존 상태 관리 도구로 문제를 해결하려면 복잡한 추가 로직이 필요했음.

결론적으로, 실시간 통신은 Zustand로 처리하고 있지만, 데이터 변경 및 생성 요청이 많아지면서 중복 처리 문제를 해결하기 위해 추가적인 솔루션이 필요했습니다.

이에 따라 TanStack Query를 도입하여 다음과 같은 방식으로 문제를 해결했습니다.

요청 상태(isLoading, isError, isSuccess)를 간단히 관리.
프론트엔드에서 관리해야 할 상태와 로직을 줄여 생산성을 크게 향상.

이러한 배경을 바탕으로 TanStack Query를 통해 상태 관리의 복잡성을 효과적으로 줄이고, 사용자 경험을 개선할 수 있을 거라 판단했습니다.

🗺️ 문제 해결 과정

TanStack Query를 도입하여 데이터 뮤테이션, 상태 관리, 중복 요청 방지를 효율적으로 처리했습니다.

useMutation 활용
- 서버에 데이터 변경 요청을 보낼 때 사용.
- 요청 상태(isLoading, isError, isSuccess)를 간단히 관리.
- API 호출 성공/실패 여부에 따라 콜백으로 상태 업데이트.
  - 마치 Promise의 then, catch, finally를 사용하는 듯한 사용자 경험.

구현 과정

예를 들어, 질문 삭제 처리 과정을 살펴보겠습니다. ‘Ask-It’ 에서는 특정 요청의 결과에 따라 토스트 메시지를 보여주거나 추가 작업이 필요합니다.

const { mutate: deleteQuestionQuery, isPending: isDeleteInProgress } = useMutation({
  mutationFn: (params: {
    questionId: number;
    sessionId: string;
    token: string;
  }) =>
    deleteQuestion(params.questionId, {
      sessionId: params.sessionId,
      token: params.token,
    }),
  onSuccess: () => {
    addToast({
      type: 'SUCCESS',
      message: '질문을 삭제했습니다.',
      duration: 3000,
    });
    removeQuestion(question.questionId);
  },
  onError: console.error,
});

위 코드를 보면, 질문 삭제 요청을 보내는 API 함수를 mutationFn으로 등록하여 사용하고 있습니다. 또한 onSuccess, onError와 같이 API 호출 결과에 따라 특정 작업을 추가할 수 있습니다.
- 여기서는 onSuccess에서 토스트 메시지를 표시하고, 전역 상태를 변경하고 있습니다.
useMutation의 결과로 얻은 mutate 함수를 통해 mutationFn으로 등록된 함수를 호출할 수 있습니다.
- mutate 함수를 호출할 때에도 onSuccess, onError, onSettled를 설정할 수 있습니다.
또한, 요청 상태를 커스텀 훅으로부터 받아올 수 있습니다.
- 여기에서는 isPending이 isDeleteInProgress라는 이름으로 변경되어 사용되고 있습니다.

const handleDelete = () => {
  if (expired || !sessionToken || !sessionId || isDeleteInProgress) return;

  deleteQuestionQuery({
    questionId: question.questionId,
    sessionId,
    token: sessionToken,
  });
};

이후 isDeleteInProgress 상태에 따라 mutate 함수의 중복 호출을 방지하고 있습니다.

TanStack Query를 사용함으로써 useState, useEffect와 같은 훅을 사용하지 않고도 단순하게 상태를 관리하고 있습니다. 이를 통해 요청 중복을 효율적으로 방지할 수 있었습니다.

📈 결과 및 성과

중복 요청 방지
- useMutation의 상태를 활용하여 요청 중복을 쉽게 해결할 수 있었습니다.
개발 생산성 향상
- 요청과 관련된 상태 관리 로직을 크게 줄이고, 요청 상태를 TanStack Query가 관리하도록 위임하여 개발의 편의성과 생산성을 높일 수 있었습니다.
- API 요청 성공/실패에 따른 후속 작업을 직관적이고 간단하게 구현할 수 있었습니다.

결과적으로, 중복 요청 방지에 있어서 효과적으로 코드를 작성할 수 있게 되었고, 이는 생산성을 높이는 데 기여했습니다.

‘Ask‐It’의 TanStack Query