react-query를 cutom-hook으로 감싸는 것에 대해 의견이 궁금합니다 🤔

[geongyu09]

react-query에서 제공하는 훅 (useQuery, useMutate) cutom-hook으로 감싸는 것에 대해 의견을 듣고자 해당 디스커션을 열게 되었습니다.

저는 개인적으로 "react-query를 전부 커스텀 훅으로 감싸는 것이 좋다" 라는 의견을 가지고 있는데요!
이와 관련한 저의 의견을 필력 해보았습니다.
가볍게 읽어보시고 의견 남겨주시면 감사할 것 같습니다!
서로의 의견을 듣고 더 나은 코딩 방향을 정해볼 수 있으면 좋을 것 같습니다

현재 상황

현재 리크루트 코드에서는 react-query에서 제공하는 훅 (useQuery, useMutate)을 컴포넌트에서 정의 후 사용하고 있습니다.

//ex)
"use client";

const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
  const {
    data: allData,
    isLoading,
    isError,
  } = useQuery(
    ["allApplicant", pageIndex, order],
    () => getApplicantByPageWithGeneration(+pageIndex, generation, order),
    {
      enabled: !!generation,
    }
  );

  if (!allData || isLoading) {
    return <div>로딩중...</div>;
  }

  if (isError) {
    return <div>에러 발생</div>;
  }
 // 생략..
}

덕분에 컴포넌트 내에서 해당 쿼리문이 어떤 동작을 하는지를 명확히 알 수 있다는 장점을 안고 코딩을 할 수 있었습니다.

현재 코드의 문제 인식

하지만 이번 pr을 작성하면서 많은 생각이 들게 되었는데요!
해당 코딩 내용에는 useQuery 와 useMutate를 동시에 사용하며, mutate가 onSuccess시 useQuery내용을 invalidate 해주어야 하는 상황이었습니다.
이 과정에서 동일한 queryKey가 사용되었으며, 이를 한번에 관리할 수 있는 방법이 필요하다고 느끼게 되었습니다.

또한 간단히 특정 query를 invalidate를 해야하는 상황이라고 가정했을 때, 현재의 코드는 해당 queryKey를 찾기 위해서 해당 요청이 있을만한 컴포넌트를 찾아가야 하는데, 이러한 방법은 효율적인 방법은 아니라고 생각합니다..!

고안한 해결 방법_커스텀 훅

바로 커스텀 훅으로 감싸는 것입니다.
실제로 queryKey 관련하여 쉽게 관리할 수 있는 방법이 tanstack팀의 기술 블로그에서 소개하고 있는데요!

(번역본)
커스텀 훅을 생성하세요. (Create custom hooks)
하나의 useQuery 호출만 감싼다고 하더라도 커스텀 훅을 만드는 것은 보통 가치가 있습니다.
-실제 데이터 불러오기를 ui와 분리하여 useQuery 호출과 함께 위치시킬 수 있습니다.
-하나의 쿼리 키에 대한 모든 사용법 (그리고 존재한다면 타입 정의 까지)을 하나의 파일에 유지할 수 있습니다.
-일부 설정을 조절하거나 데이터 변환을 추가해야 하는 경우 한 곳에서 처리할 수 있습니다.
여기에 대한 예시는 위에 있는 할 일 목록 쿼리 예제에서 이미 많이 보셨을 것입니다.

제가 주목하는 부분은 "하나의 쿼리 키에 대한 모든 사용법 (그리고 존재한다면 타입 정의 까지)을 하나의 파일에 유지할 수 있습니다." 입니다.
사실 query를 감싸는 커스텀훅 전부를 한 파일에서 정의하진 않겠지만, 그럼에도 분명히 queryKey를 사용함에 있어 이점이 분명히 있을 것입니다.

제가 주목했던 queryKey부분이 아니더라도 useQuery문을 다른 컴포넌트에서 재사용해야하는 상황(예를 들면이번 pr에도 사용되었던 관리자인지 확인을 위한 쿼리)에서도 분명한 이점이 있을 것이며, 이를 사용하는 컴포넌트에서도 굳이 쿼리의 내부 동작까지 알아야 할 필요 없이 해당 컴포넌트의 주요 관심사에 집중할 수 있다는 장점도 있다고 생각합니다.

감싼다면 어떤 query문까지 감싸야 할까?

이번 주제와 관련해서는 이에 대한 기준도 명확히 해야한다고 생각합니다.
이번 pr에서 남겨주셨던 커맨트에도 언급해주셨던 부분이기도 합니다.

저는 이와 관련해서는 "모든 query문(useQuery, useMutate)을 커스텀 훅으로 감싸야 한다" 라고 생각합니다.
이에 대한 이유는 "일관성" 때문인데요!

특정 query문만 커스텀 훅으로 빼게 되면 아래과 같은 문제가 발생할 것으로 예상합니다!

1. 커스텀 훅으로 감싼 query문과 감싸지 않은 것의 차이점이 모호할 수 있다.
   누구든 그 기준은 애매할 수 있다고 생각합니다. 다른 로직과 결합된 부분만 커스텀 훅으로 빼게 된다면, 결국 개발하는 사람이 많은 이 프로젝트의 경우, 명확히 기준을 잡았다고 해도 사람마다 약간의 인식 차이로 인하여 그 기준이 완전히 일정하진 않을 수 있을 것이라 생각합니다.
   (사실 이와 관련한 경험이 없어서 단순 추측일 뿐입니다.)
2. 누군가 새롭게 팀에 합류하였을 때 커스텀 훅으로 빠진 것과 그렇지 않은 것에 대한 기준을 모른 상태에서는 코드에 대한 이해가 어려울 수 있을 것 같습니다.

추가적으로 위에서 언급했듯 커스텀훅으로 뺐을 때 얻을 수 있는 장점들을 굳이 간단한 쿼리문에서 얻지 않을 이유는 없을 것이라고 생각합니다.
(정확히 말하면, 간단한 쿼리문에서 "한 depth 들어가야 하는 비용" < "커스텀 훅으로 뺐을 때 얻을 수 있는 장점" 이라고 생각합니다.)

저의 얄팍한 코딩 실력과 지식, 그리고 경험에서 나온 주장이므로 다른 분들은 해당 부분에 대해서 어떻게 생각하고 있을지 궁금합니다!

---

참고 자료

• https://careerly.co.kr/qnas/3279
• https://medium.com/hcleedev/web-react-query-custom-hooks%EB%A1%9C-%EB%8D%94-%EC%9E%98-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-2ea47fb358c3
• https://highjoon-dev.vercel.app/blogs/1-practical-react-query#%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%9B%85%EC%9D%84-%EC%83%9D%EC%84%B1%ED%95%98%EC%84%B8%EC%9A%94-create-custom-hooks

[smb0123]

저도 건규님의 의견에 동의합니다.

이유

1. 데이터를 단순히 받아오기만 하는 로직이 컴포넌트에 있을 필요가 없다고 생각합니다.
2. 해당 커스텀 훅이 재사용되는 경우에 query key에 대한 실수를 줄일 수 있다고 생각합니다.
3. 리쿠르팅 프로젝트가 완성된 프로젝트가 아니라고 생각하기 때문에 api가 변경될 수 있는데 api 경로가 바뀌었을 때 커스텀 훅의 api 경로만 바꿔주기만 하면 된다는 편리함이 있다고 생각합니다.

[2yunseong]

좋습니다!

더불어서, queryKey를 관리하는 것도 필요해보입니다. 현재 queryKey는 하드코딩된 값으로 관리되고 있어서, 따른 관리 수단이 필요합니다.
그리고 추가로 Suspense Query를 사용하는 것도 생각해보면 좋을 것 같습니다!