[React] swr 사용해보기

프로젝트를 하던 도중 백엔드에서 처리돼 db에 저장된 정보를 실시간으로 불러오는 기능 구현이 필요하게 됐다.

socket 방식으로 가능하겠지만 데이터 규모가 크지도 않고 주 기능이 아니라서 다른 방법이 없을까 검색해보던 도중 swr에 대해 알게 됐다.

---

https://swr.vercel.app/ko

Next js를 만드는 팀에서 진행중인 프로젝트, 데이터를 가져오는데 사용하는 리액트 hooks.

데이터를 불러오는데 캐시된 데이터를 바탕으로 변경사항이 없으면 불필요한 랜더링이 일어나지 않는 등등 유용한 기능이 많다.

더 자세히 알아보기: https://velog.io/@soryeongk/SWRBasic

---

와닿은 응용 사례 중에 지도 웹사이트에서 실시간 버스 위치를 제공하는데 이 swr을 사용한 경우를 봤는데, 페이지 포커싱 시에 데이터를 불러오거나 옵션 중 타임(refreshInterval)을 주어 실시간으로 보일 수 있는 갱신 기능을 구현할 수 있었다.

도로 위험감지 알림 시스템을 swr을 약간 사용해 구현해보았다.

const fetcher = async (url) =>
  await axios.get(url).then((response) => JSON.parse(response.data.alerts));

function AlertPage() {
  const {
    data = [],
    error
  } = useSWR("/api/streaming/getAlerts", fetcher, {
    refreshInterval: 1000,
  });

  const onClose = async (alert) => {
    axios.post(`/api/streaming/removeAlerts/${alert._id.$oid}`).then(() => {
      console.log(`${alert._id.$oid} 삭제 완료`);
    });
  };

  const renderAlerts = data.map((alert, index) => {
    return (
      <div key={alert._id.$oid}>
        <AlertComponent alert={alert} index={index} onClose={onClose} />
      </div>
    );
  });

  if (error) return <div>failed to load</div>;
  if (data === []) return <div>loading...</div>;

  return <div>{renderAlerts}</div>;
}

export default AlertPage;

갱신 기능도 유용했지만 swr을 사용하면 코드 시인성이 좋아진다고 느꼈다. 습관적으로 쓰던 useeffect와 usestate 대신 사용해보니 새롭기도 하고 장점이 많다! 물론 모든 기능을 대체하는 것이 아니기도 하고, 필요한 곳에 적절히 사용할 때 좋은 효과를 볼 수 있을 것 같다.

아직 모르는 기능이 많아 이것저것 더 써 보면서 기록해봐야겠다.