React - 실시간 데이터 전송이 필요할 때 react-query 라이브러리

오늘은 react-query 라이브러리를 설치했다.

 

서버 상태를 관리해주는 react-query 라이브러리 장점

 

  1. 성공/실패/로딩 중 쉽게 파악 가능

  2. 틈만나면 refetch 해줌

  3. 실패 시 retry 해줌

  4. state 공유 안해도 된다.(ajax코드 다시 쓰면 됨)

  5. ajax 결과 캐싱 가능

 

  => 실시간 데이터 전송이 필요한 페이지에서 주로 쓰인다. ( ex. 코인거래소)

 

사용법을 알아보자. 터미널 오픈 후

npm install react-query

 

 

그리고 index.js에서 설정해줘야 할 몇가지.

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

const queryClient = new QueryClient(); 

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

컴포넌트를 QueryClientProvider 로 감싸주면 된다. 속성은 client={queryClient}

 

 

그리고 App 컴포넌트에 가서 사용하면됨. 꽤나 간단합니다.

  import { useQuery } from 'react-query';
  
  function App() {

      let result = useQuery('userData', ()=>{
        return axios.get('https://codingapple1.github.io/userdata.json')
        .then((a)=> {
          return a.data
        }),
        { staleTime : 2000 } // refetch 간격 조절 가능
      })
      
  	return(
    	//생략
    );
  }

useQuery를 import 한 후 똑같이 서버에서 데이터 불러오면 된다.

데이터 결과를 담을 변수하나 만들어 주고 useQuery('작명', 콜백함수)

return만 잘 써주면 됨.

 

 

이제 이 result 값을 원하는 곳에서 불러다 사용할 수 있는데 짱짱 좋은점이

  <Nav className="ms-auto">
    { result.isLoading ? '로딩중' : result.data.name }
    { result.error && 'error' }
  </Nav>

.isLoading, .error 로 로딩/실패 과정을 바로 파악할 수 있다는 점이다.

따로 state만들어서 로딩 중 기능 구현할 필요가 없음.

그리고 자동으로 refetch(간격 설정 가능), 서버가 죽었으면 retry를 시도해주는 착한 라이브러리.

 

state를 만들지 않고 다른곳에서 또 ajax요청 코드를 짜서 result 데이터를 사용할 수 있는데,

같은 화면에서 2번 이상 똑같은 ajax가 요청돼도 캐싱을 통해 알아서 부담없이 처리해준다.

자세한건 공식문서를 참조하며 더 공부해보자....