TanStack Query | React Query, Solid Query, Svelte Query, Vue Query
Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue
tanstack.com
1. React-Query란?
리액트 쿼리는 리액트 애플리케이션의 데이터 fetching(이하 불러오기), 캐싱, 업데이트 및 동기화를 간소화하는 라이브러리이다. 리액트 쿼리의 직관적이며 유연한 API를 통해 pagination, 실시간 업데이트, 최적화 업데이트 등과 같이 복잡한 로직을 직접 작성해야 하는 경우를 피할 수 있다. 또한, 해당 API는 성능 최적화와 불필요한 네트워크 요청 감소 등의 효과를 포함하고 있다. 리액트 쿼리는 일반적인 REST API 뿐 아니라 GraphQL 엔드포인트, 실시간 DB를 포함한 다양한 데이터 소스와 잘 작동하도록 설계되었다.
2. React-Query는 왜 사용할까?
- 데이터 불러오기와 관리의 간소화 : 리액트 쿼리는 데이터 불러오기와 캐싱의 복잡성을 추상화하는 직관적이면서 사용이 간편한 API를 제공한다.
- 성능의 최적화 : 리액트 쿼리는 불필요한 네트워크 요청을 줄이고 클라이언트 사이드에서 데이터를 캐싱하는 방식으로 성능 최적화를 유도한다. 따라서 애플리케이션의 보다 빠른 로딩을 이끌어내 응답성을 높일 수 있다.
- 복잡한 사용 사례의 처리 : 리액트 쿼리는 pagination, 실시간 업데이트, 낙관적 업데이트 등과 같은 복잡한 사용 사례에 대해서 복잡하고 긴 사용자 정의 코드를 작성하지 않고도 쉽게 처리할 수 있는 기능을 제공한다.
- 다양한 데이터 소스의 지원 : 리액트 쿼리는 일반적인 REST API 외에도 GraphQL 엔드포인트, 실시간 데이터베이스 등의 다양한 종류의 데이터 소스와 함께 작동하도록 설계되어 있다.
- 오류 처리 : 리액트 쿼리는 기본적으로 강력한 오류 처리 기능을 제공하고 있어 오류 처리를 위한 코드를 직접 작성하는 데에 많은 시간을 들일 필요가 없다.
3. React-Query의 기능들
- Query : 쿼리는 비동기적으로 반환되는 데이터에 대한 요청을 의미한다. 리액트 쿼리에서 쿼리는 엔드포인트, 매개변수와 기타 구성 옵션을 설정할 수 있는 선언적인 API를 사용하여 정의된다.
- Query State : 리액트 쿼리는 쿼리의 상태를 추적하기 위해 "loading", "error", "success", "idle" 등의 상태를 제공한다. 이러한 상태를 통해 사용자에게 피드백을 제공하고 오류, 로딩 중 상태를 적절히 처리할 수 있다.
- Querying and Refetching : 쿼리를 시도하고 데이터를 리페칭하기 위한 간단한 API를 제공한다. 쿼리는 다양한 조건에 따라 자동으로 시도되거나 "refetch" 함수를 사용하여 수동으로 시도될 수 있다.
- Mutation : 뮤테이션은 서버의 데이터를 수정하는 요청이다. 뮤테이션은 쿼리와 유사한 선언적인 API를 통해 정의되며, 캐시된 쿼리 데이터에 대한 업데이트를 촉발할 수 있다.
- Query Key : 쿼리 키는 요청의 데이터와 상태를 추적하는 데 사용되는 Query 혹은 Mutation을 위한 고유 식별자이다. 쿼리 키는 쿼리의 결과를 캐시하고 쿼리를 다시 가져와야 할 때 식별자로 이용된다.
- Query Caching : 리액트 쿼리는 쿼리의 결과를 메모리, 디스크에 저장하는 캐싱 시스템을 이용하기 떄문에 추가적인 네트워크 요청 없이도 데이터의 검색이 용이하다. 캐시는 새로운 데이터를 사용할 수 있을 때 자동으로 업데이트 되며, 다양한 기준을 부여하여 데이터를 만료시키거나 제거하도록 구성할 수 있다.
- Infinite Query : 무한 쿼리는 필요에 따라 더 많은 데이터를 자동으로 가져와서 대규모 데이터 세트를 pagination할 수 있는 기능이다. 무한 쿼리는 쿼리 키에 cursor 또는 page 매개변수를 정의하고 사용자가 데이터를 스크롤하거나 탐색할 때 자동으로 업데이트하는 방식으로 작동한다.
- Reactive Data Fetching : 리액트 쿼리는 사용자 상호작용이나 기타 이벤트에 반응하여 데이터를 업데이트할 수 있는 Hooks와 API를 제공한다. 이를 이용하여 UI를 데이터와 동기화하고 사용자에게 실시간 업데이트를 보다 쉽게 제공이 가능하다.
- Query Filter and Sorting : 리액트 쿼리는 쿼리 결과를 쉽게 필터링하고 정렬할 수 있다. 이를 이용하면 직접 코드를 작성하지 않고도 사용자에게 고급 검색이나 정렬 기능을 쉽게 제공할 수 있다.
- Query Pagination : Infinite Query 외에도 쿼리 키의 "page" 매개변수를 사용하여 pagination을 지원한다. 이를 이용하여 사용자에게 대규모 데이터 세트를 탐색할 수 있도록 하는 UI를 쉽게 구축할 수 있다.
4. Querying
리액트 쿼리를 사용하기 위해서는 컴포넌트 내부에서 useQuery 훅을 호출해야 한다.
기본적으로는 위와 같이 호출하게 된다. 이 때, queryKey는 v4기준으로는 배열의 형태로 주어져야 하며 유니크 값을 가져야 한다.
예시) queryKey: [ "todo", todoId ] // todoId는 변수로서 주어지기 때문에 다른 todoId가 주어지면 다른 query 값을 캐싱하게 된다.
status의 경우 error, loading, success를 값으로 가지며 각각 쿼리에서 에러가 발생한 경우, 쿼리가 시작되지 않아 데이터를 받아오지 않은 경우, 쿼리가 성공하여 데이터를 받아온 경우를 의미한다. 각 상태는 또한 isError, isLoading을 통해서도 사용할 수 있으며 success인 경우 data가 존재하는 것으로 확인이 가능하다. status가 error 상태일 경우 error 값이 존재하여 error를 유저에게 표시해줄 수 있고, success 상태일 경우 data가 존재하여 이 데이터를 기반으로 UI를 나타낼 수 있다.
useQuery에는 기본적인 queryKey, queryFn 외에도 다양한 옵션들을 추가하여 어떻게 쿼리가 실행될지, 어떻게 캐싱될지 추가적인 설정이 가능하다.
- enabled : boolean 값을 가지며 기본값은 true로 설정되어 있다. 이 값은 쿼리가 실행되어야 하는지 실행되지 말아야 하는지를 설정하며 false로 바꾸면 쿼리의 실행을 막을 수 있다.
- cacheTime : 얼마 동안 결과 값을 캐싱해둘지를 밀리세컨드 단위로 지정하는 옵션으로 기본 설정은 무기한 유지하도록 되어있다.
- staleTime : 이 옵션은 쿼리의 결과가 '오래된' 것인지를 간주하는 데 걸리는 시간을 밀리세컨드 단위로 지정한다. 해당 시간이 경과 시 리액트 쿼리는 자동으로 refetch를 실행한다. 기본값으로는 staleTime이 지정되어 있지 않다.
- refetchInterval : refetch가 얼마마다 일어날지를 밀리세컨드 단위(1000, 1초)로 설정하거나 몇 회만(5, 5회만) 일어날지를 설정할 수 있다. false로 지정하여 refetch를 자동으로 일어나지 않게 할 수 있고, 혹은 함수 형태로 지정하여 데이터 유무에 따른 처리를 분기할 수도 있다.
- refetchOnWindowFocus : 이 옵션은 창이 다시 포커스 되었을 시 refetch를 수행할지를 결정한다. 사용자가 장시간 자리를 비운 후 다시 돌아왔을 때 데이터가 변경될 수 있기 때문에 그와 같은 경우에 유용하게 사용될 수 있다.
- refetchOnMount : 컴포넌트가 마운트될 때 쿼리를 다시 가져올지를 결정한다.
- initialData : 쿼리에 기본값으로 줄 data를 설정할 수 있으며, 주어질 시 쿼리는 즉시 해당 data를 data로 제공하며 쿼리가 실행되지 않는다.
- initialStale : 쿼리를 처음에 '오래된' 것으로 간주할지 여부를 결정하는 옵션으로 기본 설정은 false이다.
위 예시는 cacheTime, staleTime, refetchOnWindowFocus, initialData를 옵션으로 추가한 useQuery의 예시이다. 추가적으로 isLoading은 status가 loading일 시 true값을 가지며, 로딩 중임을 나타내는데 이용될 수 있다.
만약 쿼리가 실패한 경우에는 자동으로 refetch되기를 기다리거나 새로고침을 해야할까? useQuery가 반환하는 객체에는 'retry'가 존재한다. retry를 에러 컴포넌트의 특정 버튼을 눌렀을 때 실행되도록 한다면, 유저는 직접 retry를 실행할 수 있게 된다.
https://tech.kakaopay.com/post/react-query-1/
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대해 설명합니다. 이 글은 연작 중 1편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2편: React Que
tech.kakaopay.com
'React' 카테고리의 다른 글
| 탭 컴포넌트 그리고 useTab 훅을 만들어보다 (0) | 2023.09.20 |
|---|---|
| 리액트-쿼리 / TanStack Query(@tanstack/react-query) - 2 (0) | 2023.03.16 |
