데이터 가져오기를 위한 React Hooks - SWR

시작하기 - SWR

계기

• 기존 행정경계 좌표를 서버에서 불러올 때 클라이언트에서 캐싱을 해 놓아서 재사용하도록 해 놓았었다. 자바스크립트 코드로 직접 구현하였고, 여러 곳에서 사용되기 시작해서 일반화를 하려다가 TypeScript에 맞춰 타입을 지정하기 다소 어려워서 썩 만족스럽게 되지는 않았다.
  • 캐시 일반화 시도
• 그러다가 "클라이언트 캐싱 전략"을 구현한 SWR 라이브러리에 대해 알게 되었고, 좀더 일반적이고 체계적으로 캐싱을 적용할 수 있지 않을까 싶어 사용해보기로 하였다.

SWR의 본질

하지만 SWR의 본질이 "캐싱"은 아니다.

"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다.

SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적입니다.

useSWR(URL, fetcher) 훅을 사용한 데이터 가져오기는 대략 다음과 같은 순서로 실행된다.

1. 캐시에 URL에 대한 데이터가 이미 있다면 일단 가져온다.
2. 그러는 한편 URL로 다시 요청을 보낸다.
3. 응답이 도착하면 캐시에 저장된 데이터와 비교하여 최신화한다(해당 데이터를 사용하는 컴포넌트도 재렌더링된다).

2-3 과정을 재검증(Revalidation)이라고 한다.

SWR은 즉 fetch 응답을 기다리는 동안에도 캐시된 데이터를 사용해 UI를 일단 띄울 수 있도록 도와준다. 끊김없는 UX를 제공하는 것이 일차적인 목표이고, 부가적으로 중복 요청 제거, 재검증을 통한 업데이트 등을 지원한다고 이해하면 편하다. 이름대로의 기능을 하는 라이브러리라고 할 수 있다.

사용법

보통 사용하고자 하는 리소스마다 재사용이 가능하도록 커스텀 훅을 만들어서 사용하는 게 일반적이다. 가령 다음과 같다.

// 보고있는 지역들의 평점(Rates)을 불러오는 커스텀 훅
import useSWR from 'swr';

const fetcher = async <T>(info: RequestInfo, init?: RequestInit) => {
  const response = await fetch(info, init);
  if (response.status !== 200) throw Error('요청 실패');
  const json: IAPIResult<T> = await response.json();
  return json.result;
};

const useRates = (range: IRange) => {
  const path = `${process.env.REACT_APP_API_URL}/api/map/rates`;
  const query = `?address=${range.address}&scope=${range.scope}`;

  const key = path + query;
  const { data, error } = useSWR<IMapInfo[]>(key, fetcher);

  return {
    rates: data,
    isLoading: !error && !data,
    isError: error,
  };
};

export default useRates;

• useSWR(key, fetcher)를 사용해 데이터를 가져오면 key를 기준으로 캐시에 저장된다.