실시간 데이터가 중요하다면 react-query

react-query?

react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다.

 

여러가지 장점이 있지만 주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행한다.

• 몇초마다 자동으로 데이터를 다시 가져온다.
• 요청 실패시 몇초 간격으로 재시도할 때
• 다음 페이지를 미리 가져올 수 있다
• ajax 성공 / 실패 시 각각 다른 html을 보여준다.

직접 개발해도 되지만, react-query 라이브러리를 사용하면 편리하게 구현할 수 있다.

SNS, 코인거래소 같은 실시간 데이터를 보여줘야 하는 사이트에서 유용하다.

 

 

react-query 사용하기

1. 설치하기

npm install @tanstack/react-query

 

2. 셋팅하기

// index.js 에 1, 2, 3번 셋팅

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>	// 3번
      <Provider store={store}>
        <BrowserRouter basename="/react_shop">
          <App />
        </BrowserRouter>
      </Provider>
    </QueryClientProvider>
  </React.StrictMode>
);

 

2. import

// App.js

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

 

3. 사용하기 (문법)

// App.js

let result = useQuery(['작명'], ()=>{
    return axios.get('https://codingapple1.github.io/userdata.json')
    .then((res)=>{
        // console.log(res.data)
        return res.data;
    })
}, { staleTime : 2000 })

 

react-query 장점

1. ajax 요청을 react-query를 이용해 요청하면 더 편리한 기능을 제공한다.

2. ajax 요청 성공/실패/로딩중 상태를 쉽게 파악할 수 있다.

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러남' }
      { result.data && result.data.name }
    </div>
  )
}

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

• ajax 요청이 로딩중일 땐 result.isLoading이 true가 된다.
• ajax 요청이 실패시엔 result.error가 true가 된다.
• ajax 요청이 성공시엔 result.data 안에 데이터가 들어온다.

 

3. 알아서 ajax 재요청을 한다.

페이지 체류하고 나서 일정시간이 경과하거나,

다른창으로 갔다가 다시 페이지로 돌아오거나,

다시 메인페이지로 돌아오거나,

이런 여러 경우에 알아서 ajax 요청을 다시 한다.

재요청을 끄거나, 재요청 간격을 조절하는 법도 있다. { staleTime : 2000 }

 

4. ajax로 가져온 결과는 state 공유 필요없음

만약 App.js 에서 useQuery 내의 ajax 요청 결과를  Detail.js에서 사용하려면 props로 전송해야 한다.

 

하지만 그냥 Detail.js 에서 동일한 코드를 똑같이 적어도 된다. (useQuery ajax요청)

react-query는 스마트하기 때문에 ajax 요청이 2개나 있으면 1개만 실행하고, 캐싱기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와 사용한다.

 

 

결론

react-query가 주장하는 장점은

server-state (DB데이터)를 프론트엔드에서 실시간 동기화해주는 걸 도와준다.

하지만 ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 좀 비효율적일 수 있따.

실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent events 같은 가벼운 방식이 좋다.

그렇기 때문에 react-query는 ajax 관련 기능개발을 편하게 할수 있는데 의의가 더 있다.