[Refactor] 리액트 쿼리 커스텀훅 만들기

* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다.

메인프로젝트 소개와 회고 보기

 

이번 리팩토링에서는 기존에 컴포넌트 내에 함께 있던 리액트 쿼리 요청 코드를 커스텀훅으로 분리하는 작업을 했다.

 

왜 커스텀훅을 만들려고 했나

컴포넌트에 네트워크 처리 코드가 종속된다

컴포넌트 내에 서버 상태를 가져오거나 변경하는 로직이 있어서 종속성이 생기고, 컴포넌트의 재사용성이 떨어졌다. 역할의 분담이라는 측면에서 ui를 표시해주는 컴포넌트와 네트워크 요청을 처리하는 부분의 코드가 분리돼 있는 것이 좋다고 생각했다.

 

코드 수정이 어렵다

컴포넌트 내에 네트워크 처리 코드가 있을 경우 요청 엔드포인트가 바뀐다든가 응답을 받은 이후에 해야 할 후속 작업들이 바뀐다든가 하는 일이 생긴다면 해당 요청을 처리하는 모든 코드를 일일이 찾아서 변경을 해야 한다.

 

어떻게 만들었나

프로젝트에서 각자 맡았던 부분을 커스텀 훅으로 만들기로 했다. 아래는 내가 맡은 부분 중 컨텐츠 후기를 생성하는 요청을 커스텀 훅으로 만든 코드다.

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { PostComment } from '@/api/api';

const useCommentCreate = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation(PostComment, {
    onSuccess: () => queryClient.invalidateQueries(['comments']),
  });
  return mutation;
};

export default useCommentCreate;

후기를 생성하는 mutation 요청을 보내고 나서 요청이 성공적으로 처리되고 나면 기존 쿼리를 invalidate하는 것까지 커스텀훅으로 만들었다.

 

해보니 어땠나

프로젝트 기간에 코드를 짜면서 매번 똑같은 요청을 보내는 코드를 복붙하고 invalidateQueries를 하기 위해 queryClient를 새로 선언하는 작업이 중복이 심하다고 생각해 신경이 쓰였었는데 이렇게 커스텀훅으로 분리하고 나니 중복된 부분을 줄일 수 있어서 좋았다.

다만 전체 코드량이 좀 줄어들 것이라고 생각했었는데 그렇지는 않아서 조금 의아하기도 했다. 리액트 쿼리 자체가 간결하게 코드를 짤 수 있도록 잘 되어있기 때문에 커스텀훅으로 분리하기 위해서 추가된 코드가 오히려 더 많아서 그런 것 같다. 코드량 자체보다는 얼마나 재사용성이 좋고 로직이 효율적으로 잘 돌아가느냐가 더 중요하기 때문이 코드량이 줄지 않은 것은 큰 문제는 아닐 것 같다.