React Query 데이터 재조회 방식

Question

안녕하세요.

이번 프로젝트에서 React Query를 처음 써보게 되었는데요.

데이터를 조회해올 때, 페이지와 검색어가 바뀔 때마다 API Call을 하는 것이 목적입니다.

제가 아는 방식은 아래와 같이 2가지인데, 두 방식이 어떤 차이가 있고, 어떤 선택이 좋은 선택인지 분간이 잘 되지 않아서 질문드립니다. (폰으로 작성중이라 코드가 좀 가물가물해서 문법이 약간 틀렸을 수도 있습니다!)
----------------------------------------
1. useQuery만 사용
useQuery([someList, page, keyword],
() => {
const params = { page, keyword, };
fetchList(params);
},
{
onSuccess: () => { // do something }
});

2. useQuery, useMutation, useEffect 사용
useQuery(someList,
() => {
const params = { page, keyword, };
fetchList(params);
},
{
onSuccess: () => { // do something }
});

const { mutate } = useMutation(fetchList,
{
onSuccess: () => { queryClient.invalidateQueries(someList); }
});

useEffect(() => {
const params = { page, keyword, };
mutate(params);
}, [page, keyword]);
----------------------------------------
사실 제가 아는 useMutation의 용도(생성, 수정, 삭제)와 코드 사이즈 측면을 생각해서 실제론 1번 방식을 사용하고 있기는 한데, 동작상 두 방식의 정확한 차이를 모르겠어서 이렇게 질문드립니다.

혹시 두 방식 모두 일반적이지 않다면, 일반적인 방식도 함께 알려주시면 정말 감사드리겠습니다!

손정현 · Answer

안녕하세요!

위에 올리신 코드를 기반으로 gist를 만들어보았는데요.
https://gist.github.com/json9512/8bc447d0c7206ca73daca5da79531e59

1번 방법이 좀 더 일반적인 방법인 것 같습니다.

아시다시피 useMutation은 CUD을 위한 훅이고 useMutation으로 GET 요청을 하는 것은 설계 용도를 벗어나는 사용법이 아닌가 싶습니다.

우선 1번과 2번의 차이는 1번의 경우 param이 바뀔때 서버로 요청을 1번만 보내게 됩니다. 2번의 경우는 2번 보냅니다. mutate를 할때 fetchList로 한번 보내고 이후 someList 키가 invalidate 되면서 useQuery가 한번 더 fetchList를 호출합니다.

이론적으로 useQuery는 여러 컴포넌트에서 호출해도 같은 값을 공유하지만, useMutation의 경우는 값을 공유하지 않는 것으로 알고 있습니다. 다만, mutation의 상태를 저장/관리하기 위해 MutationCache라는 곳에 mutation 자체와 관련 데이터를 따로 저장하는데요. 이걸 감안한다면 2번 방법은 메모리도 더 많이 쓰는 방법이 되는 것 같네요.

정리를 하자면:
- 1번 방법이 일반적인 방법인 것 같습니다. query key에 page, keywords를 넣어서 관리해도 무방해요.
- 2번 방법이 메모리 차원에서 더 비효율적입니다
- 2번 방법은 네트워크 요청을 2번 보냅니다
- 2번 방법은 훅이 설계된 의도대로 사용되지 않아서, 버그를 발생 시킬 수 있습니다
- (사견) 2번 방법은 코드 의도를 파악하기 쉽지 않은 것 같습니다
- (사견) page, keyword 조합마다 쿼리가 저장될텐데, 캐싱이 꼭 필요한건지/유용하게 사용할 수 있는지도 고민이 필요한거 같습니다

여담으로 useEffect는 사용할 때 꼭 필요한것인지 고민하면 좋습니다.

참고할만한 링크들 첨부합니다:
- https://beta.reactjs.org/learn/you-might-not-need-an-effect
- https://tkdodo.eu/blog/mastering-mutations-in-react-query
- https://tanstack.com/query/v4/docs/reference/MutationCache
- https://tanstack.com/query/v4/docs/reference/useMutation
- https://tanstack.com/query/v4/docs/reference/useQuery

커리어리 AI 봇 · Answer

두 가지 방식 모두 React Query에서 데이터를 재조회하는 방법 중 하나이며, 이 두 가지 방식의 차이점은 데이터를 재조회하는 시점이 다릅니다.

1번 방식은 useQuery hook을 사용하여 새로운 page 또는 keyword가 전달되면 자동으로 API를 호출하여 데이터를 업데이트 합니다. 즉, React Query의 기능만으로도 데이터를 재조회할 수 있습니다. onSuccess 옵션을 사용하여 API 호출에 대한 처리를 추가할 수 있습니다.

2번 방식은 useMutation과 useEffect를 사용하여 데이터를 재조회합니다. useMutation을 사용하여 API를 호출하고, onSuccess 옵션을 사용하여 API 호출에 대한 처리를 추가합니다. useEffect를 사용하여 페이지나 검색어가 변경될 때마다 useMutation을 호출하고, invalidateQueries를 사용하여 데이터를 다시 조회합니다.

두 가지 방식 모두 재조회를 위한 기능을 구현하는 방법이며, 선택은 개발자가 프로젝트의 상황과 요구 사항에 따라 다를 수 있습니다.

보통은 1번 방식과 같이 useQuery만 사용하여 React Query의 기능만으로 데이터를 재조회하는 것이 일반적입니다. 하지만, 특정한 상황에서는 2번 방식과 같이 useMutation과 useEffect를 사용하여 데이터를 재조회하는 것이 필요할 수 있습니다. 예를 들어, API 호출에 대한 처리가 많이 필요하거나, 페이지와 검색어가 바뀔 때마다 데이터를 미리 로드하고 싶은 경우 등입니다.