React Query 커스텀훅 작성 방법론에 대하여 어느 방법이 좋을까요?

[Seok93]

🤔 React Query 커스텀훅 관리 방법으로 어느 것이 더 좋을까요?

이번에 React Query 부분을 작업하면서 한 가지 고민이 생겼습니다.

useQuery와 useMutation 등을 필요한 곳에서 직접적으로 사용하기 보다 커스텀훅으로써관련된 로직을 모으려고 생각하고 있습니다. 그러던 중 2가지 방법으로 작성이 가능할 것 같은데, 여러분들은 어느 방법이 더 좋다고 생각하는지 자유롭게 의견을 주셨으면 좋겠습니다.

1️⃣ 관련된 useQuery와 useMutation을 하나의 파일에서 관리하되, 로직을 분리해서 관리하는 방법

※ 예시는 큰 그림으로만 봐주세요. 자세하게 작성하지 않았어요😓

// TaskQuery.ts 파일
export const useGetTasksQuery = (id: number) => {
  const {data: tasks, isLoading: isTasksLoading} =  useQuery([TASK_KEY, id], api.get('/task', { id }));
  return { tasks, isTasksLoading };
}

export const useCreateTaskQuery =  (successCallback: () => void) => {
  const {mutate} =  useMutation((data: CreateTaskRequest) => api.post('/task', {...data}), {
    onSuccess: successCallback,

  });
 return { mutate };
}

2️⃣ 하나의 커스텀훅으로 useQuery와 useMutation을 묶어서 관리하고, 필요한 정보를 한 번에 받는 방법.

// useTaskQuery.ts
export const useTaskQuery = (id) => {
  const queryClient = useQueryClient();

  const { data: tasks, isLoading: isTaskLoading} = useQuery(
    [TASK_KEY, id],
    api.get('/task', { id }),
  );

  const { mutate: deleteTaskMutation } = useMutation(
    async (id) => api.delete(`/task/${id}`),
    {
      onSuccess: () => {
        queryClient.invalidateQueries("TASK_KEY");
      },
    }
  );
  return { tasks, isTaskLoading, deleteTaskMutation };

[Seok93]

제일 처음에는 2번처럼 설계하려고 했는데, 조금 더 생각해보니 개인적으로는 1번이 더 좋은 방법이 아닐까 생각해요. 그 이유는 다음과 같아요.

1. 하나의 함수에 다양한 일들이 묶여 있어 단일 책임 원칙에 위배되는 것 같다.
2. useQuery와 useMutation은 처리에 따라 받아야할 인자가 다르기 때문에 하나로 묶으면, 받와야할 인자가 늘어나고, 그만큼 사용이 복잡해진다. 극단적으로는 사용을 위해 억지로 인자를 받아야할 상황이 생길 수도 있을 것 같아요.
3. API 엔드 포인트가 달라지면, 실질적으로 다른 일을 처리하니, 관심사의 분리 측면에서도 API 엔드 포인트에 따라 훅을 분리하는게 좋다.
4. 각각의 로직이 분리되어 있어도, 관련된 로직이 하나의 파일에 모여있어서 어떤 기능을 하는지 전반적으로 파악이 여전히 가능하다.

다른 분들의 의견도 들어보고 싶어요! 자유롭게 써주세요😊

[Yoonyesol]

저는 1️⃣번이 좋은 것 같아요... 2번 방식처럼 두 개의 훅을 묶어서 관리하면 아무래도 1번보다는 로직이 조금 더 복잡해질 텐데 제가 아직 react query에 익숙하지 않다보니😂😂 코드를 작성하거나 수정할 때 조금 더 많은 시간이 소요될 것 같습니다ㅋㅋㅋㅋㅋ 그리고 유지보수 측면에서도 1번이 더 유리할 것 같다는 생각입니다!

[Seok93]

맞아요. 더 복잡해질 것 같네요. 말씀하신대로 유지보수 측면에서도 복잡해지고 데이터 간의 의존성이 강해지니 수정도 까다로워질 것 같아요. 역시 1번으로 가야할 것 같네요 🤔