React Query

React Query

평소에 fetch,axios만 사용하다. React Query (데이터 패칭 라이브러리) 어떤 장/단점이 있는지 궁금해서 한번 사용해 보았다

설치 방법

$ npm i @tanstack/react-query
$ pnpm add @tanstack/react-query
$ yarn add @tanstack/react-query

Provider 설정

import React from 'react'
import './App.css'
import MainProducts from './components/MainProducts'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// Create a client
const queryClient = new QueryClient()

export default function App() {
  return (
    // QueryClientProvider wrap
    <QueryClientProvider client={queryClient}>
      <MainProducts />
    </QueryClientProvider>
  )
}

데이터 불러오기

// useQuery 적용하기
const { data,isLoading,error } = useQuery(['testApi'], async () => {
//첫번쨰 자리 testApi이름이 만들어 준다.
return fetch(data/products.json).then((res) => res.json())
//두번쨰 api
})
// 마지막 옵션

• data: 요청한 api 데이터를 확인 할수 있다
• isLoading: 요청이후 응답까지 대기시간
• error: 오류난 경우

검색어 찾기

import React, { useEffect } from 'react'
import '../index.css'
import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'
import Axios from 'axios'
import { useCallback } from 'react'

const Search = () => {
  const [mock, setMock] = useState()

  // 디바운싱 함수 라이브러리없이 구현하기
  const debounce = (callback, duration) => {
    let timer
    return (...args) => {
      clearTimeout(timer)
      timer = setTimeout(() => callback(...args), duration)
    }
  }
  
  const { data, error } = useQuery(['mockApi', mock], () => {
    // mock 상태가 변해야 호출한다 트리거 
    console.log('확인중@@@!')
    return Axios.get(
      'https://pokeapi.co/api/v2/pokemon?limit=30&offset=0',
    ).then((res) => res.data)
  })

  const ChangeHandler = useCallback((e) => {
    debounce(setMock(e.target.value), 1000)
  }, [])

  return (
    <div className="hello">
      <h1 className="title">검색 불러오기</h1>
      <input type="text" value={mock || ''} onChange={ChangeHandler} />

      {mock?.length > 0
        ? data?.results
            ?.filter((item) => item.name.toLowerCase().includes(mock))
            .map((item, index) => {
              return <h2 key={index}>{item?.name}</h2>
            })
        : data?.results?.map((item, index) => {
            return <h2 key={index}>{item?.name}</h2>
          })}
    </div>
  )
}

export default Search

리액트 쿼리를 사용해서 검색어 필터 기능을 구현 했다. debounce 변수에 mock(인풋상태 값) 인자로 전달해 주었다.
useQuery(['mockApi', mock], 배열에 두번째 mock useQuery 트리거 역할을 해준다.

장점

1. Cache 똑같은 데이터 호출이라면 얼마동안 메모리상에 캐시를 해줄건지 캐시시스템을 해준다.
2. Retry 실패 하였을떄 다시 호출 해주는 기능을 해준다.