후니후니

✏️ React Query의 Mutation, Infinite Query 지난 포스팅에서는 React Query의 Stale과 Cache에 대해서 알아보았다. 이번 포스팅에서는 Mutation, Infinite Query에 대해서 알아보려고 한다. Mutation useQuery는 데이터를 조회하는 용도로 사용한다. 그러면 Post, Delete, Put 등의 HTTP Method를 사용하기 위해서는 어떻게 할까. useMutation을 사용할 수 있다. useMutation와 useQuery는 비슷하지만 조금 다르다. useMutation은 mutate 함수를 반환한다. useQuery와 달리 Query Key 값이 필요하지 않다. 캐시된 데이터가 없기 때문에 isLoading을 지원하지 않는다. 기본..

✏️ React Query는 무엇일까 요즘 React 기반의 프로젝트를 보면 비동기 통신에 React Query를 많이 사용하고 있는 걸 볼 수 있다. 필자는 최근에서야 실무에서 React를 주로 사용하게 되었고, 이전에는 Vue를 주로 사용하다 보니 비동기 통신은 Axios만 사용했었고, Axios로 데이터를 가져오면 Vuex로 관리하게 되었는데 요즘은 React Query + Recoil 조합을 꽤 많이 사용하는 것 같다. 우선, React Query는 자신을 비동기 상태 관리라고 설명한다. 서버에 있는 데이터를 가져오고, 캐싱하고, 비동기 통신에서 발생하는 Error 혹은 Loading 단계를 쉽게 처리할 수 있도록 도와준다. 처음 React Query를 다룰 때 캐싱한다는 게 조금 생소했다. 그러..