데이터 가져오기를 위한 React Hooks : swr로 훅 만들고 사용하기

stale-while-revalidate

SWR의 어원인 stale-while-revalidate은 http 캐시 전략이다.

✅ The stale-while-revalidate HTTP Cache-Control extension allows a cache to immediately return a stale response while it revalidates it in the background, thereby hiding latency (both in the network and on the server) from clients. (rfc5861)
✅ stale-while-revalidate 확장을 사용하면 캐시가 백그라운드에서 재평가되는 동안 오래된 응답을 즉시 반환할 수 있으므로 지연 응답 시간을 줄일 수 있다.

Cache-Control: max-age=600, stale-while-revalidate=30

HTTP 헤더에서 Cache-Control을 위와 같이 정의하면,

• HTTP 요청이 600초 안에 반복적으로 발생한다면 검증 없이 캐시 값을 반환한다.
• HTTP 요청이 601~630초 안에 반복적으로 발생한다면 포그라운드에서는 캐시 값을 반환하고 백그라운드에서는 revalidation을 요청한다.
• HTTP 요청이 630초 이후에 발생한다면 서버에 다시 요청을 보낸다.

하루 혹은 특정 주기 단위로 게시글이 업데이트되는 사이트 등에서 유용하게 사용될 수 있는 캐시 전략이다.

위의 전략을 통해 주기적으로 캐시를 재검증하고 캐시를 효율적으로 사용하는 라이브러리가 SWR이라고 볼 수 있다!
또한 SWR은 이런 효율적인 작동 뿐만 아니라, 훅을 작성하고 사용하는 것이 무척 간편하다는 장점을 자랑한다.

SWR 사용 예제

github user profile을 가져오는 github api에 요청을 보내는 훅을 정의하고 컴포넌트에서 그 훅을 사용하는 예제를 준비했다.

swr 설치하기

npm i swr

github user profile을 가져오는 훅 정의하기

import useSWR from "swr";

const fetcher = (...args) =>
  fetch(...args).then((res) => {
    switch (res.status) {
      case 200:
        return res.json();
      case 404:
        throw new Error("No Users Found");
      default:
        return res.json();
    }
  });

export default function useGithubUser(username) {
  const { data, error } = useSWR(
    `https://api.github.com/users/${username}`,
    fetcher
  );

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

fetcher() 함수를 정의하였다. 원래 switch case 부분은 안 써도 되지만 나는 유저를 잘못 검색한 경우를 예외로 빼주기 위해 써주었다.

useSWR 훅에 요청을 보낼 url과 fetcher함수를 넘겨주고 세 가지 상태 값을 리턴해주면 커스텀 훅 완성!

컴포넌트에서 훅 사용하기

import React from "react";

import useGithubUser from "../useGithubUser";

const ResultCard = ({ targetUser }) => {
  const { user, isLoading, isError } = useGithubUser(targetUser);

  if (targetUser === null) return null;
  if (isLoading) return {/*로딩하는 컴포넌트*/};
  if (isError) return {/*에러 컴포넌트*/};

  const {
    avatar_url,
    followers,
    following,
    name,
    login,
  } = user;
  return {/*유저 퍼블리싱 컴포넌트*/};
};

export default ResultCard;

useGithubUser 훅을 가져오고 각 상태에 따라 렌더링할 값을 정의해주면 끝!!

Reference

https://swr.vercel.app/ko/docs/getting-started
https://datatracker.ietf.org/doc/html/rfc5861
https://jbee.io/react/thinking-about-global-state/