이번에 개발하는 앱에 중고거래하는 서비스가 들어가면서 최신화된 데이터를 꾸준히 가져와서 관리해야 하는 결제와 주문 데이터들이 들어가면서 SWR이라는 것을 알게 되었다. 데이터 가져오기를 위한 React Hooks이라는 SWR에 공부한 것을 글로 남겨보려 한다.

SWR이란?

SWR은 Stale-While-Revalidate의 약자로, React 컴포넌트에서 사용할 수 있는 훅 형태의 SWR 라이브러리이다. SWR을 사용하면 간편하게 데이터를 가져오고, 캐시 하여 이전 데이터를 재사용하며, 신선한 데이터를 가져와서 사용자 경험을 향상할 수 있다고 한다.

설치

# npm
npm i swr
# yarn
yarn add swr

적용

우선, 데이터를 가져오는 API를 호출하는 함수 fetcher 함수를 생성한다. 이 핵심 함수와 같이 useSWR 훅을 사용하여 데이터를 가져와서 관리할 것 이다.

const fetcher = (url) => fetch(url).then((res) => res.json());

주문내역 데이터를 가져오는 함수를 useSWR 훅을 사용해서 개발한다고 가정하자:

import useSWR from 'swr';

const MyComponent = () => {
  const { data, error } = useSWR('/transaction', fetcher);

  if (error) {
    return <div>Error while fetching data</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>Transaction: {data}</div>;
};

데이터가 로딩 중인지, 오류가 발생했는지, 아니면 데이터를 표시할 준비가 되었는지를 확인하고 해당 상태에 따라 적절한 UI를 렌더링 하며 사용하면 된다.

이제 주문 데이터를 가져오고, 데이터의 로딩 상태와 오류 상태를 관리할 수 있다. SWR은 이전에 가져온 데이터를 캐시 하여 재사용하며, 일정한 주기로 데이터를 다시 검증하여 새로운 데이터를 가져온다.

SWR은 오류 처리를 위한 기능도 제공해준다고 한다. 만약 데이터를 가져오는 과정에서 오류가 발생하면, 이전에 캐시 된 데이터를 사용하여 애플리케이션을 계속해서 작동시킬 수 있다고 한다.

옵션

이뿐만 아니라, SWR에서 제공하는 옵션들을 사용하면 더 섬세하게 컨트롤이 가능하다.
예를 들면:

• revalidateOnReconnect: 네트워크 연결이 복구될 때 데이터를 다시 가져올지 여부를 설정한다.
• revalidateOnMount: SWR 훅이 마운트 될 때 데이터를 다시 가져올지 여부를 설정한다.
• revalidateOnFocus: 페이지가 포커스를 얻을 때 데이터를 다시 가져올지 여부를 설정
• refreshInterval: 데이터를 자동으로 갱신하는 간격을 설정한다.
• errorRetryCount: 에러 발생 시 자동 재시도를 수행할 최대 횟수를 설정한다.

이 외 옵션들도 많이 있기 때문에 상황에 따라 사용하면 섬세하고 간단하게 데이터를 가져오고 관리할 수 있는 강력한 도구로써 사용할 수 있다.

결론

SWR은 내장된 캐시를 제공하여 이전에 가져온 데이터를 저장하고 재사용할 수 있어서 가져온 데이터를 따로 저장하는 스토어 작업도 필요 없어 코드의 양도 많이 줄 일 수 있었다. 결제나 주문 정보 같은 실시간으로 보여줘야 하는 데이터들을 서버로부터 새로운 데이터가 도착하면 자동으로 화면에 반영해 실시간 경험도 제공할 수 있어서 이번에 SWR을 사용하면서 데이터 가져오기와 관련된 작업을 훨씬 쉽게 처리할 수 있었다.

참조:

• SWR 공식 문서: https://swr.vercel.app/