[react-query] 리액트 쿼리

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.

 

 서버 상태를 클라이언트로 가져올 수 있다.

캐싱, 동기화, 에러핸들링 등 비동기 과정을 더욱 편하게 사용할 수 있다.

 

 

?캐싱? 

데이터는 업데이트 되고 있지만 요청은 날리지 않는 것

 

yarn add react-query

react-query를 설치한다.

 

import { useQuery } from "react-query";

const { isLoading, error, data } = useQuery('mandu', () => axios("URL"));

쿼리를 사용하기 위해서 필요한 것

• 쿼리에 대한 고유한 키값 ('mandu')
• promise를 return하는 함수 (()=> axios("URL"))

키값

• 쿼리를 재패치, 캐싱, 공유하는 데 사용된다.
• 문자열도 Key가 될 수 있겠지만 컨벤션을 맞추기 위해 항상 배열을 사용한다고 한다.  (['mandu'])
• (Query 내부에서 키를 배열로 변환하기 때문에 결국 같음) 

쿼리의 상태(이 중 한 가지의 상태만 가짐)

• isLoading(status === 'loading')
• isError(status === 'error')
• isSuccess(status === 'success')
• isIdle(status === 'idle') - 불능상태

쿼리가 isLoading 상태면 error 속성을 사용할 수 있다. (ex. error.message)
쿼리가 success 상태면 data 속성을 사용할 수 있다.
쿼리가 가져와지는 경우 isFetching은 true다.

 

덮밥 먹는다!

 

 

 

Queries | React Query | TanStack

Queries | TanStack Query Docs

 

https://youtu.be/46vKqPlTW2w

 

 

React Query Key 관리 | 지나가던 개발(zigae)

React Query Key 관리