react query

: React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리
(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.)

공식 문서
https://react-query.tanstack.com/overview
참고 블로그
https://merrily-code.tistory.com/76

set up

설치 명령어

npm i react-query

상위 컴포넌트(index.js) 코드 set up
아래 코드 예시는 공식 문서에서 가져왔다.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 } 

Example component

function Example() {
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )
 //fetch 부분 따로 component분리 가능
   
   if (isLoading) return 'Loading...'
 
   if (error) return 'An error has occurred: ' + error.message
 
   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}
       <strong>✨ {data.stargazers_count}</strong>{' '}
       <strong>🍴 {data.forks_count}</strong>
     </div>
   )
 }

예시 결과

react query의 장점

1) useState, useEffect와 같은 코드들을 축약시켜준다.
2) fetcher함수를 따로 분리해서 컴포넌트로 만들 수 있다.
3) caching(데이터를 캐시에 저장)을 하기 때문에, 데이터 손실을 방지할 수 있다.

useQuery

:React Query hook
:React Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리

const { isLoading, data } = useQuery("Query-key" , fetcher funtion);

React-Query 공식문서 참고
https://react-query.tanstack.com/reference/useQuery#_top

노마드 코더 참고
#4.9 React Query part One