[코딩애플;React] React-query

1.React Query 설치 & 셋팅

-터미널에 아래 코드 입력

 

npm install react-query@3

 

-index.js에서 import 하기

 

import { QueryClient, QueryClientProvider } from '@transtack/react-query';

 

-변수 설정

 

const queryClient = new QueryClient();

 

 

-<App/>을 QueryClientProvider로 감싸기

    <QueryClientProvider client={queryClient}>

      <Provider store ={store}>

        <BrowserRouter>

          <App />

        </BrowserRouter>  

      </Provider>

    </QueryClientProvider>

 

 

2.React로 ajax요청하기

useQuery를 import한 후

import { useQuery } from 'react-query';

 

useQuery()로 ajax요청을 감싸기

  let result = useQuery(['작명'],()=>{

   return axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{

      return a.data

    })

  })

 

 

3.react-query 장점

1)ajax요청 성공/실패/로딩중 상태를 쉽게 파악이 가능하다.

       <Nav className ="ms-auto">

            반갑습니다

            {result.isLoading && '로딩중'}

            {result.error && '에러남'}

            {result.data && result.data.name}

          </Nav>

 

:result라는 변수에 알아서 ajax현재상태가 저장됨.

ajax요청이 로딩중일때는 result.isLoading이 true.

ajax요청이 실패일때는 result.error가 true.

ajax요청이 성공일때는 result.data안에 데이터가 들어옴.

 

2)틈만 나면 알아서 ajax 재요청 해줌 : 페이지 체류 하고나서 일정시간 경과, 다른 창에서 돌아오거나 다시 메인페이지로 돌아올 때 등등

*재요청 시간 조절하는 방법

  let result = useQuery(['작명'],()=>{

   return axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{

      return a.data

    }),{staleTime : 2000}

  })

 

3)실패시 재시도 알아서 해줌

4)ajax로 가져온 결과는 state공유가 필요없다 : 캐싱기능이 있어서 이미 같은 ajax요청한 적 있으면 그걸 우선 가져와 사용함. 그리고 요청이 2개일 때는 1개만 사용.

 

4. react-query 단점

sever-state를 실시간 동기화 해주지만 ajax를 몇 초마다 요청하고 가져오므로 http1을 쓰는 서버나 브라우저는 비효율적

->웹소켓, server-sent-events같은 가벼운 방식도 있음

 

5.RTK query 라이브러리

:ajax요청하는 코드가 다양하고 컴포넌트 안의 코드가 길어지는 것을 Slice안에서 관리 가능하게 해줌

하지만 코드가 깔끔하진 않다.