React-Query

React-Query는 React엡에서 비동기 로직을 쉽게 처리할 수 있게 해주는 라이브러리입니다. 이전까지는 Redux와 Saga를 이용해서 비동기 로직을 많이 관리했는데 최근 React-Query를 이용하여 비동기 로직 관리를 많이 사용한다고 하여 포스팅 하게 되었습니다.
React-Query는 전역 상태를 건드리지 않고 데이터를 가져오거나 업데이트, 캐싱 작업을 쉽게 할 수 있습니다. 또한 다음과 같은 장점이 있습니다.

• 복잡한 여러 줄의 코드를 몇 줄의 로직으로 대체 가능

• 애플리케이션을 유지 관리하기 쉽고 새로운 기능을 더 쉽게 구현 가능

• 빠르고 반응성이 좋아 UX면에서 직접적인 영향을 미침

• 대역폭을 절약하고 메모리 성능을 높임

사용 예제

설치

npm install react-query
# or
yarn add react-query 

소스코드

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 function Example() {
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )
 
   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 공식 문서