[React] 리액트 쿼리(React-Query)와 라이브러리에 관하여

🍋 React-Query

 : React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 작업을 도와주는 라이브러리이다.

🌱 Redux, Mobx와의 차이점

• react-query는 서버상태를 다루는 라이브러리, redux와 mobx는 클라이언트 상태를 다루는 라이브러리이다.

🌱 fetch와 axios와의 차이점

• fetch와 axios는 실제 API 요청을 수행하여 직접 리소스를 불러오는 역할의 라이브러리이고, react-query는 API를 통해 불러온 서버의 상태를 내부적으로 캐싱 및 동기화하는 등 잘 활용할 수 있게 도와주는 라이브러리이다.

🍋 React-Query의 장점

1. 별도의 설정 없이 즉시 사용이 가능하다
2. 캐싱을 효율적으로 관리해준다
3. 같은 데이터에 대한 여러번 요청이 있을 시 중복을 제거해준다
4. 백그라운드에서 알아서 오래된 데이터를 업데이트 해준다
5. 데이터 업데이트 시 최대한 빨리 반영해준다
6. 페이징처리, 지연 로딩 데이터와 같은 성능 최적화에 적절하다
7. 서버 쪽 데이터를 가비지 컬렉션을 이요하여 자동으로 메모리 관리를 해준다
8. 구조적 공유를 통해 쿼리 결과를 기억해준다

🍋 React-Query 사용

1. QueryClient 정의

      : App컴포넌트에 QueryClient를 선언하여 어플리케이션에 QueryClient를 연결하고 제공한다. 

         QueryClient의 역할은 캐시와 상호작용하는데 사용된다.

import React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import './App.css'
import Router from './shared/Router'

const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  )
}

export default App

2.  useQuery, useMutation hook 사용

    🌱  useQuery 

const result = useQuery(queryKey, queryFn?, options?)

 

• queryKey : 각각의 쿼리를 식별하는 키
• queryFn : 비동기 업무를 실행하여 Promise를 반환하는 함수
• options : 각종 옵션을 전달 ( 데이터 패칭 여부, 성공/실패 여부시 로직 설정 등)

🌱  useMutation

const mutate = useMutation(mutationFn, options?)

• mutationFn : 비동기 업무를 실행하여 Promise를 반환하는 함수
• options : 각종 옵션을 전달 위의 useQuery 옵션기능과 동일

** useQuery는 Read를 목적으로 사용하며, useMutation은 그 외 Create / Update / Delete 사용에 적절하다.