리액트에서 일정 간격 반복적으로 api 호출하기 refetchInterval

최근 회사에서 데이터 가공(?)에 시간을 많이 쓰고 있다. 배열로 받는 데이터를 객체로 만들어 그래프에 쓰기도 하고, 배열 -> 객체 -> 배열 -> 객체 4번을 타고 들어가서 쓰는 데이터도 있다. 처음에는 무지성으로 썼다만 요즘은 sql 쿼리문이나 api에서 로직을 수정해서 원하는 데이터로 만들기도 한다. 

 

그렇게 다듬어진 데이터로 실시간 그래프를 구현하는데 1분에 한 번, 빠르면 5초에 한 번씩 데이터를 호출한다. 최근 이를 구현하면서 다양한 방법이 있어 시도해 보고 기록해 본다.

 

api 반복 호출

setInterval

처음에 사용한 방법은 useEffect에서 setInterval을 사용하는 방법이다. setinterval을 useEffect에서 호출하는 것 자체가 좋은 코드는 아니었다.

const getData = async () => {
    await axios
      .get("http://localhost:13003/data")
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

useEffect(() => {
    getData();
    
    const intervalId = setInterval(getData, 5000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

보통은 setInterval 안에서 콜백 함수를 호출해서 사용했었는데 변수에 담은 후 clearInterval을 return 해줬다. unmount가 났을 때 clear을 하지 않으면 연달아 두 번씩 호출되기도 하고 예측하기가 어렵다. 참고로 unmount 개념은 리액트 생명주기를 공부해야 알 수 있다. 

react-query

다른 방법을 찾아봤더니 실시간 호출을 위해 react-query를 많이 사용한다고 한다. react-query의 useQuery에서는 setInterval 기능을 제공하기 때문에 반복 호출을 쉽게 구현할 수 있는 것이 장점이었다.

useQuery(
    "getData",
    async () => {
      try {
        const res = await axios.get(
          "http://localhost:13003/dat"
        );
        setData(res.data);
      } catch (error) {
        console.log(error);
      }
    },
    { refetchInterval: 5000 }
  );

더 이상 useEffect에 함수를 몰아넣지 않아도 된다. 의존성 배열을 사용하지 않는 단순 반복 api 호출이라면 굳이 useEffect를 사용하지 않고 useQuery만으로 구현이 가능하다. refetchInterval 기능을 통해 5초마다 반복적으로 api가 호출 된다. 

 

하는 김에 then, catch를 지우고 가독성 좋은 try, catch로 리팩토링했다. 

 

리액트를 사용한다면 리액트 쿼리는 꼭 사용해보길 바란다. react-query dev tool도 사용할 수 있으며 여러가지 이점이 많다. 바쁘다 보니 블로그 글도 짧고 성의 없는 것 같지만 나중에 보충하면 되겠지 한다.

 

---

추가

다만, refetchInterval만을 위해 react-query를 선택하는 것은 바보 같은 일이다. react-query는 전역상태관리, 효율적인 캐시 관리, react-query-devtool도 지원하고 있으니 최대한으로 사용하는 것을 추천한다.