react query

 

React Query
는 React 애플리케이션에서 서버 상태 및 데이터 가져오기를 관리하는 데 널리 사용되는 라이브러리입니다. 데이터 가져오기, 캐싱 및 상태 동기화 관리를 단순화하고 중앙 집중화하여 원격 API 및 데이터 소스 작업을 더 쉽게 만듭니다. React Query는 Redux와 같은 상태 관리 라이브러리가 아닙니다. 대신 데이터 계층, 특히 데이터 가져오기 및 캐싱을 처리하는 데 중점을 둡니다.

 

설치 (설치후index.js에 우산씌워야함)

npm i @tanstack/react-query

 

 

템플릿

const { isPending, error, data } = useQuery({
queryKey: ['repoData'],
queryFn: () =>
fetch('https://api.github.com/repos/TanStack/query').then(
(res) => res.json(),
),
})

 

예시

interface Icoin {
id: string;
name: string;
symbol: string;
rank: number;
is_new: boolean;
is_active: boolean;
type: string;
}
const Coins = () => {
const { isPending, error, data } = useQuery({
queryKey: ["allCoins"],
queryFn: () =>
axios.get(`https://api.coinpaprika.com/v1/coins`).then((res) => res),
});
console.log(data?.data.slice(0, 100));
return (
<div>
{data?.data.slice(0, 100).map((coin: Icoin) => (
<h1>{coin.name}</h1>
))}
</div>

---

1. 쿼리 : 쿼리는 원격 데이터 소스(예: API)에서 데이터를 가져오는 함수입니다. React Query는 useQuery이러한 쿼리를 정의하고 실행할 수 있는 후크를 제공합니다. 쿼리를 매개변수화할 수 있으며 결과가 자동으로 캐시되므로 중복된 네트워크 요청이 줄어듭니다.
2. 변이(Mutations) : 변이는 레코드 생성, 업데이트, 삭제 등 서버의 데이터를 변경하는 기능입니다. React Query는 useMutation변형 실행을 위한 후크를 제공합니다. 또한 변형이 성공한 후 캐시 업데이트 및 무효화를 처리합니다.
3. 쿼리 무효화 및 다시 가져오기 : React Query는 자동으로 캐시를 관리하고 변형이 발생하면 캐시된 데이터를 무효화합니다. 필요에 따라 데이터를 수동으로 무효화하고 다시 가져올 수도 있습니다.
4. 캐싱 : React Query는 기본적으로 쿼리 결과를 캐시합니다. 이렇게 하면 중복 네트워크 요청의 필요성이 줄어들어 애플리케이션 성능이 크게 향상될 수 있습니다. 캐시된 데이터는 특정 기간 이후 또는 특정 조건에 따라 만료되도록 구성할 수 있습니다.
5. 백그라운드 데이터 동기화 : React Query는 백그라운드 데이터 동기화를 지원합니다. 정의된 간격으로 데이터를 자동으로 다시 가져오도록 쿼리를 구성하여 애플리케이션이 항상 최신 정보를 표시하도록 할 수 있습니다.
6. 페이지가 매겨진 쿼리 : 페이지가 매겨진 데이터를 React Query로 쉽게 처리할 수 있습니다. 페이지가 매겨진 데이터 소스에 대한 기본 지원을 제공하고 무한 스크롤 및 페이지 매김과 같은 기능을 제공합니다.
7. 낙관적 업데이트 : React Query를 사용하면 낙관적 업데이트를 수행할 수 있습니다. 즉, 서버가 업데이트를 확인하기 전에 예상되는 변형 결과로 UI를 즉시 업데이트하는 것을 의미합니다. 이를 통해 애플리케이션의 인지된 성능이 향상됩니다.
8. 서버 상태 및 종속성 관리 : React Query는 서버 상태 및 종속성을 관리할 수 있습니다. 쿼리에 대한 종속성을 정의할 수 있으며 해당 종속성이 변경되면 자동으로 다시 가져옵니다.
9. Devtools : React Query에는 쿼리와 변형을 검사하고 디버깅하기 위한 시각적 인터페이스를 제공하는 "React Query Devtools"라는 브라우저 확장이 함께 제공됩니다.
10. Suspense 모드 : React Query는 React의 Suspense 모드를 지원하므로 Suspense 컨텍스트 내에서 사용할 수 있어 useQuery비동기 useMutation데이터 가져오기 처리가 단순화됩니다.
11. 전역 구성 : 재시도, 부실 시간 등과 같은 동작을 제어하기 위해 React Query에 대한 전역 구성을 설정할 수 있습니다.

React Query를 시작하려면 인스턴스를 생성하고 QueryClient애플리케이션을 로 래핑한 QueryClientProvider다음 구성 요소 useQuery와 같은 제공된 후크를 사용해야 합니다.useMutation