[React] React-Queary

keynene·2023년 1월 11일

React

목록 보기

20/23

📖React-Queary

서버의 값을 클라이언트에게 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 Ajax(비동기 요청)과정을 편하게 해주는 라이브러리
※캐싱 : 미리 하드에 저장해놓는 작업
React 개발하다 보면 store 내부에 클라이언트 데이터와 서버 데이터가 공존하며 상호작용을 하게 되는 현상을 예방할 수 있음
실시간으로 Ajax 요청을 할 때실시간 데이터 요청 시 기능들을 사용하려면 아래와 같이 사용
발생하는 문제들을 손쉽게 다룰 수 있게 해줌

react-query가 필요한 경우?

일정기간 자동으로 데이터 갱신이 필요한 경우

Ajax 요청 실패 시, 재시도가 필요한 경우 (재시도 간격 설정 가능)

다음 페이지를 미리 가져올 때

Ajax 성공/실패/로딩중 시 각각 다른 html을 보여줄 때

즉, 실시간 데이터 요청 성공/실패/재요청 상황에 즉각적인 대처가 필요한 사이트

💻React-query 설치방법

React-query는 React와 같이 라이브러리이기 때문에 설치해서 사용해야 함

설치하고자 하는 React파일 실행
터미널에서 npm install @tanstack/react-query 입력
(npm install react-query와 비슷하나 tanstack버전이 최신버전임)
설치완료 후 index.js파일에서
<App>컴포넌트를 <QueryClientProvider>컴포넌트로 감싸기
(import 하고 사용 해야함)

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'  //1번
const queryClient = new QueryClient()   //2번

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>  //3번
    <Provider store={store}>     //Redux 컴포넌트인데 미사용 시 생략 가능
      <BrowserRouter>            //Router 컴포넌트인데 미사용 시 생략 가능
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
);

📝React-query 사용방법

✏️React-query로 Ajax 요청하기

일반 ajax로 요청해도 되는데, 실시간 데이터 요청 시 기능들을 사용하려면 아래와 같이 사용

import { useQuery } from '@tanstack/react-query';

function App(){
  let 변수명 = useQuery(['쿼리변수명'],()=>{
    return (
      //axios 문법과 동일 (axios 한 것을 useQuery로 감싸서 변수에 저장하는 것이 핵심)
      axios.get('url명')
      .then((결과데이터명)=>{ return 결과데이터명.data })
    )
  })
}

👉🏻 useQuery()를 제외한 나머지는 axios 문법이므로 아래 포스팅 확인!
내 포스팅 : [React] Ajax, Axios, Fetch

✏️ajax 요청 성공/실패/로딩중 상태 기능구현

import { useQuery } from '@tanstack/react-query';

function App(){
  let result = useQuery(['querydata'],()=>{
    return(
      axios.get('url')
      .then((axios_result)=>{ 
        return axios_result.data
      })
    )
  })
  
  return (
    <div>
      //로딩중 : 'now lodaing...' 출력
      { result.isLoading && 'now lodaing...' }  
    
      //실패 : 'error' 출력
      { result.error && 'error' }  

      //성공 : axios로 받아온 데이터 출력
      { result.data && result.data }  
    </div>
  )
}