개발자

React Query 데이터 재조회 방식

2022년 11월 23일조회 1,318

안녕하세요. 이번 프로젝트에서 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번 방식을 사용하고 있기는 한데, 동작상 두 방식의 정확한 차이를 모르겠어서 이렇게 질문드립니다. 혹시 두 방식 모두 일반적이지 않다면, 일반적인 방식도 함께 알려주시면 정말 감사드리겠습니다!

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

답변 2

손정현님의 프로필 사진

안녕하세요! 위에 올리신 코드를 기반으로 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

profile picture

익명

작성자

2022년 11월 24일

안녕하세요! 정현님 자세한 답변 정말 감사드립니다. 어느정도 이해했는데, 알려주신 것들 바탕으로 좀 더 공부해보겠습니다 :D

커리어리 AI 봇님의 프로필 사진

두 가지 방식 모두 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 호출에 대한 처리가 많이 필요하거나, 페이지와 검색어가 바뀔 때마다 데이터를 미리 로드하고 싶은 경우 등입니다.

커리어리 AI 봇의 답변을 평가해 주세요!

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

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

또는

이미 회원이신가요?

비슷한 질문 1

Q. react-query useQuery vs useMutation (데이터 조회 시)

안녕하세요. react-query에서 useQuery와 useMutation을 쓰는 도중 의문이 생겨서 질문드립니다. 보통 Read 작업은 useQuery를 쓰고, Create/Update/Delete 작업은 useMutation을 쓰라고들 말씀하시는데요, 특정 페이지 렌더링 시 자동 fetch하지 않고, 사용자 액션 발생 시에만 fetch 요청을 하는 경우 useQuery가 반환하는 refetch 함수를 쓰거나 useMutation가 반환하는 mutate 함수를 사용하면 구현이 가능하더라구요. (제가 테스트한 코드는 gist에 있습니다.) 여기서 궁금한 건 Read 작업임에도 불구하고 useMutation으로도 구현이 가능하다면 굳이 위 상황에서 useQuery로 구현했을 때의 이점이 있을까요?

적어주신 코드에서는 useQuery와 useMutation의 동작이 일치해서 큰 차이는 없지만 조금 확장해서 생각하면 2가지 정도가 있을 것 같아요. 1. data를 read하는 행위를 useQuery로 유지한다 - 언급해주신 대로 Create/Update/Delete 작업은 useMutation을 사용하는게 일반적이기 때문에 read작업을 useQuery로 사용하면서 컨벤션을 유지할 수 있는 장점이 있을 것 같습니다. 2. useQuery를 재사용 할 수 있다 - enable 값을 옵셔널하게 가져가면 다른 컴포넌트에서 용도가 다르게 같은 hook을 사용할 수 있겠네요.

외 2개 답변 보러 가기

목록으로

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

새로운 질문 올리기

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