React-Query 사용해보기

react-query는 서버의 상태를 fetching 해오거나, caching, synchronizing, updating을 쉽게 할 수 있도록 도와주는 라이브러리 입니다.

react-query를 사용하기 이전에는 서버에서 데이터를 받아오는 작업을 수행하기 위해 redux나 mobx를 사용하여 비동기 작업을 수행 후 store에 저장한 뒤 데이터를 각 component에서 가져와 사용하였습니다.

하지만 이럴 경우 몇 가지 단점이 생기게 됩니다.

서버 데이터 이외에 isLoading이나 isError와 같은 상태가 많아집니다.
서버에 데이터를 요청시 response가 왔는지 에러가 발생하였는지에 관한 상태를 체크하기 위해서 입니다.
서버에 요청을 보내기 위한 코드와 데이터 가공을 위한 boilerplate 코드가 너무 많아집니다.
단순히 서버에 데이터를 요청하기 위한 것이지만 로직이 복잡해집니다.

react-query는 cache 데이터의 관리나 많은 boilerplate 코드들을 단 몇줄의 코드로 대체하는 것을 목표로 하고 있습니다.

이 글에서는 가장 기본적으로 사용하는 hook들인 useQuery, useMutation, useInfiniteQuery 3가지를 다뤄보려 합니다.

먼저 QueryClient instance를 생성 후 useQuery와 같은 hook들에서 QueryClient에 접근할 수 있도록 QueryClientProvider를 추가해줍니다.

QueryClient는 useQuery를 사용하여 실행한 react-query들의 캐시를 관리하는데 사용됩니다.

useQuery는 데이터를 fetch 해오는 hook 입니다.

주로 데이터를 Read하는 목적으로 사용됩니다.

useMutation은 Create, Update, Delete와 같이 데이터를 변경하여 server state에 사이드 이펙트를 일으킬 수 있은 경우에 사용됩니다.

useQuery와는 다르게 useMutation은 mutation 객체를 생성 후 mutate 함수를 사용하여 요청을 보냅니다.

만약 useMutation이 성공한다면 client에 남아있는 데이터 또한 갱신을 해주어야 합니다.

useQueryClient hook을 사용하여 queryClient instance를 가져와 invalidateQueries 함수를 사용하면

'test-data'라는 키를 사용하는 모든 query를 갱신시킬 수 있습니다.

useInfiniteQuery는 주로 페이스북이나 유튜브 앱에서 볼 수 있는 무한 스크롤을 만드는데 사용됩니다.

비동기 fetch 메서드에 있는 pageParam 객체 (any 타입)에서 paging에 필요한 정보들을 가져올 수 있습니다.

처음 로드할 시 페이지 1의 내용이 필요하므로 기본값으로 1을 선언하였습니다.

getNextPageParam에서는 마지막 페이지와 모든 페이지들을 parameter 값으로 받을 수 있습니다.

페이지들의 정보를 바탕으로 다음 페이지 요청에 필요한 pageParam을 반환해주시면 됩니다.

데이터 요청이 완료될 시 data.pages 배열안에 각 페이지 별로 데이터가 담기게 됩니다.

더 자세한 내용은 아래 react-query의 공식 문서를 참조해주세요

둥지