개발자

React Query 커스텀훅으로 분리, 어떤 방향으로 하나요?

2023년 05월 23일조회 2,209

Q. React Query를 커스텀훅으로 분리할 때, useQuery와 useMutation을 따로 작성하는게 좋을까요? 아니면 하나의 커스텀 훅 내에서 작성하는 것이 좋을까요? React Query를 이제 막 접하게 된 신입 프론트엔드 개발자입니다. 회사 프로젝트에서 React Query를 사용해서 서버 데이터를 받아오고 있는데, 코드 재사용성을 위해서 React Query로 데이터를 받아오는 부분과 수정 및 삭제하는 코드를 커스텀훅으로 분리하려 합니다. 검색해보니, 많은 분들이 useQuery와 useMutation을 따로 분리해서 작성하더라고요. 그런데 제가 작성하려던 방향은 다음과 같이 useQuery와 useMutation을 하나의 커스텀훅 내에서 리턴되는 방향이었습니다. React Query를 처음 써보는데, 코드의 방법 1과 방법2 중에서 어떤 방향이 더 재사용성이 좋은가요? 현업에서는 어떤 방향을 주로 사용하나요? (급하게 긁어와 수정한 코드라 정확하지 않을 수 있습니다)

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

엄홍재님의 프로필 사진

개인 취향에 따라 다르지만 분리하는게 더 좋다고 생각합니다. 각각 받아야할 데이터가 다르고 동작이 달라서 하나로 합치게 되면 함수의 인자가 너무 많아질 수 있을 것 같고 reactQuery를 사용하다 보면 함수의 인자도 매우 다양해서 합쳐서 사용하기는 좀 더 어렵다고 생각이 듭니다. 개인적으로는 첨부한 코드처럼 각각 사용할 것 같습니다. react query를 사용하는 프로젝트 화이팅 입니다! 참고 링크 https://velog.io/@bnb8419/React-Query-Custom-hook https://tanstack.com/query/v4/docs/react/reference/useQuery https://tanstack.com/query/v4/docs/react/reference/useMutation

1
2
3
4
5
6
7
8
9
10
11
12
export const useUserInfoQuery = (id: number) => {
  const {data, isLoading} =  useQuery([UserInfoQueryKey, id], api.get('/user', { id })); // 필요한 데이터를 가져온다.
  return { userInfo:data, isLoading } // 필요한 데이터 return
}

export const useCreateUserMutation =  (successCallback: () => void) => {
  const {mutate, data} =  useMutation((data: CreateUserRequest) => api.post('/user', {...data}), {
    onSuccess: successCallback,

  });
 return {mutate, data}
}
리오님의 프로필 사진

리오

작성자

SW 개발자2023년 05월 23일

받아야할 데이터가 많아지면 함수의 인자가 커질 수 있다는 생각은 못했습니다..! 답변 감사합니다.:)

김하림님의 프로필 사진

1. 관심사 분리 측면에서 API 엔드포인트 별로 훅을 나누는 게 이점이 있습니다. 2. 하나로 묶는 기준이 명확하다면 모르겠지만, 모호한 경우 유지보수에 어려움이 있을겁니다. 또한 리오님이 세워둔 기준이 있다고 해도, 다른 개발자들이 그 기준을 알 수 없기 때문에 추가적인 커뮤니케이션이 필요할 수도 있습니다. 그렇지 않으면, 어떤 코드는 같이 묶여있고, 어떤 코드는 나눠져있는 복잡한 코드로 남게될 수도 있을거 같아요. 3. 홍재님이 말씀하신 내용에 덧붙여서, 인자가 추가되는 경우에 쿼리에선 불필요하지만 뮤테이션에선 필요한 인자가 생긴다면 어떨까요? 한 쪽 함수에서 불필요한 인자를 억지로 받아야하는 웃픈 상황이 올거에요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!