React-Query

react-query라는 좋은 기술이 있다. react-query는 쉽게말해보겠다. 

일단 리액트의 좋은장점인 데이터와 UI의 일치가 편리하다는점이있다. 데이터는 업데이트가이미 되었지만 UI에서는 업데이트되기전의 데이터가 나와있다는거다(새로고침하기전에). 서버와 클라이언트에서도 이런일이 번번히있다. 서버에서의 데이터와 클라이언트에서의 보이는 데이터가 다를거다. react-query는 그런문제점을 해결해준다. 

 

예시) 암호화폐거래소가있다고 치자 , 이 암호화폐는 쉬도없이 값이바뀐다. 그럼 서버에서 그 바뀐값이 클라이언트에게 뿌려지는데 클라이언트는 쉴새없이 새로고침을 하여 서버에게 요청하기는 어렵다. react-query는 실시간으로 바뀌는 서버의값을 위해 알아서 요청을 보내고 , 클라이언트의 UI도 바꿔준다.

 

시작해보자. 

https://tanstack.com/query/v4/docs/quick-start

Quick Start | TanStack Query Docs

 

먼저 셋팅을 해보자. 

 

설치

npm install @tanstack/react-query

입력하여 설치해준다. 

 

셋팅

index.js에서 셋팅을 해주자.

 

import { QueryClientProvider , QueryClient } from '@tanstack/react-query'; //import해주어야됨

const root = ReactDOM.createRoot(document.getElementById('root'));
const queryClient = new QueryClient() //생성
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

 

App컴포넌트를 QueryClientProvider로 감싸주면된다.

 

사용

서버에 데이터를 요청하기위해 https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

이 사이트의 도움을 받아서 요청을 날려보겠다.

요청하는 데이터의 모양

 

react-query에서 hook을 사용할 수 있는데 useQuery라는 훅이다.

  let test = useQuery(['test'] , ()=>{
    axios요청
  })

이렇게 훅을 사용할 수 있는데 ['test']는 이름을 test라고 정해주었다. 그리고 콜백함수로 요청을 보내주면된다. 나는 axios를 이용해서 요청을 보낼거다. 

 

  let test = useQuery(['test'] , ()=>{
    
    return axios.get('https://jsonplaceholder.typicode.com/todos/1').then((result) => {
      console.log('요청되었습니다')
      return result.data
    })

  })

이런식으로 요청을 보내준다. 여기서 중요하게볼건 return으로 axios요청을 보낸다는거다. 그리고 then의 콜백함수로도 뽑아낸 데이터를 return해주어야된다. 그리고 요청을 보낼때마다 console.log로 '요청되었습니다'를 출력해보겠다. 

 

이게 웹사이트의 포커스가 나갔다가 다시잡히면 바로 요청이된다. 그리고 수시로 요청이간다. 이렇게 서버의 데이터가 바뀌어도 순식간에 클라이언트에서 출력할 수 있다. 

 

다음은 useQuery에서 뱉어내는 속성들을 몇개알아보자. 

error잡기

요청에 error가 있다면 error에는 true값이 들어온다. 

<div className="App">
  <p>
    {test.error && 'error입니다'}
  </p>
</div>

test.error가 true가 되면 'error입니다'를 뱉어낸다. 여기서 test.error는 error가 true로 바뀌는순간 UI도 바뀐다.

 

로딩중

{test.isLoading && '로딩중입니다'}

이번엔 서버에 요청할때 걸리는 시간을 '로딩중입니다'로 표현해보았다. isLoading은 서버에 요청보내는순간 데이터가 도착하기전까지 true였다가 데이터가 도착하는순간 false로 바뀐다. 

 

{
  test.isPaused , test.isLoadingError , test.isStale , test.isSuccess
}

 

말고도 다양한 속성들이 들어있다. 하나하나 찾아봐서 해보자.  

 

 

시간을 조절해서 재요청도 가능하다.

useQuery마지막에 객체를 하나더 보내서 {staleTime : 5000} -> 맨처음 한번요청하고 5초뒤에 한번더 요청된다. 

테스트해보면 알거다!

 

그리고 react-query는 useQuery에서 요청한 데이터를 props로 전달하지않고 그 컴포넌트에서 차라리 요청코드를 한번 더 쓰는게 낫다고 한다. 그렇게 해도 한번에 처리를 하기 때문인거같다.