React Query를 통한 실시간 서버 통신 (useQuery)

citron03·2022년 5월 1일

React

목록 보기

17/39

주식이나 디지털 자산 거래소를 보면, 실시간으로 현재 가격이 계속 실시간으로 갱신되어 최신 가격이 보이는 것을 확인할 수 있다.

리액트에서 이와 같은 기능을 어떻게 구현할 수 있을지 생각해 보았다.

실시간으로 서버와 통신을 하기 위해서 소켓을 사용할 수 있다.

소켓을 사용하는 방법 이외에 서버의 실시간 데이터를 받아 데이터를 갱신할 수 있는 방법으로 React Query를 사용해보기로 하였다.

npm i react-query로 리액트 쿼리를 설치한다.

React Query 초기 설정

리액트 쿼리를 사용하기 위해서 일단 QueryClientProvider가 사용될 컴포넌트 상위에 위치해야 한다.
그리고 QueryClientProvider의 client에 QueryClient가 연결되야 한다.

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

const queryClient = new QueryClient();

function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <p>안녕!</p>
      </QueryClientProvider>
    </div>
  );
}

export default App;

React Query 사용

import { useQuery } from "react-query";

const Data = () => {

    const 필요한데이터요청 = "id";
    
    const {isLoading, error, data, isFetching} = useQuery(
	    [필요한데이터요청], () => {
        	return fetch(`https://API 주소/${필요한데이터요청}`)
                .then((res) => res.json())
                .then((res) => res.data) // return값이 data에 담기게 된다. 
                }
            , { 
                enabled: !!필요한데이터요청, // 해당 변수가 있을 때만 요청을 보낸다
              	refetchInterval: 1000 // 1초마다 갱신
            }

    );
    
    if(isLoading){
        return <h1>로딩중!</h1>;
    }
    if(error){
        return <h1>에러 발생!</h1>;
    }
    
    return (
    <div>
        <p>데아터 보여주기</p>
        <p>{data}</p>
    </div>);
}

export default Data;