🔭 SWR 🔭

swr의 자세한 설명은 공식문서를 읽는 것이 더 좋다고 생각해서 전체적으로 정리함과 동시에 이해한 부분에 대한 복습차원에서 작성하겠습니다.

🕹️ SWR을 사용하는 이유

SWR은 기본적으로 데이터를 패치하는데 사용합니다.

하지만 데이터 패치는 fetch나 axios같은 라이브러리로도 충분히 가능한데 굳이 추가로 공부가 필요한 SWR을 사용하는 이유가 무엇인지에 대해서 제가 느낀대로 적어보려고 합니다.

일단 결론부터 말하자면 fetch나 axios는 데이터 패칭의 기능 이외에는 다른 기능은 전혀 없는 걸로 알고 있습니다.
물론 API를 호출하기 직전과 직후에 인터셉터로 다른 기능을 수행하도록 할 수는 있지만 근본적으로 API를 요청하는 역할만 합니다.

하지만 SWR은 데이터를 가져오고 난 이후에 데이터를 관리하는데 엄청난 이점이 있습니다.
키워드로만 예를 들면 데이터 캐싱, 자동 갱신, 에러 처리 등 직접 구현하기 힘든 많은 기능들을 쉽게 사용할 수 있도록 제공해주기 때문에 SWR을 사용하는 것이 아닌가 생각합니다.

이후 내용들은 이런 이점들과 사용법에 대해서 직접 경험해 본 대로 정리해 보겠습니다.
( 추가로 typescript 기준으로 정리하겠습니다. )

🔎 SWR 기본 사용법과 캐싱

• 설치

npm i swr

• 사용

import useSWR from "swr";

type UserResponse = {
  id: number;
  name: string;
  email: string;
  // 타입이 많아서 일부분만 작성하겠습니다.
}

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

const Component = () => {
  const { data, error } = useSWR<UserResponse>("https://jsonplaceholder.typicode.com/users/1", fetcher)
  
  if(error) return <h3>Failed to load<h3>;
  if(!data && !error) return <h3>Loading<h3>;
  
  return (
    <section>
      <div>{data.name}</div>
      <div>{data.email}</div>
    </section>
  )
}

일반적으로 useSWR<반환할 데이터 타입>("요청 url", fetcher) 형식으로 작성합니다.

useSWR()의 첫 번째 인자인 url은 캐시하기위한 유일한 key가 됨과 동시에 fetcher()의 첫 번째 인자로 들어가게 됩니다.

여기서 캐시 하기 위한 유일한 key가 된다는 말을 설명하기에 앞서 SWR에 대해 작은 설명을 하겠습니다.
SWR은 기본적으로 useSWR()을 호출할 때마다 API를 요청하는 것이 아니고 브라우저 화면 밖에 나갔다가 포커스 됐을 경우나 지정된 시간 등 여러 가지 상황에 맞게 자동적으로 API를 요청합니다.

• 어떤 느낌인지 직접 확인해 보려면 위 코드를 입력한 후 실행하고 개발자 패널의 네트워크를 열어놓고 다른 탭에 갔다가 다시 포커스를 주는 경우에 다시 API요청을 실행하는 것을 확인할 수 있습니다.

만약 모든 페이지마다 useSWR()을 이용해서 같은 url에 요청을 보낸다고 하더라고 SWR에서 url을 기준으로 데이터를 캐싱해두기 때문에 페이지에 입장할 때마다 항상 요청을 보내지 않고 기존에 요청했던 key인지 확인하고 기존에 요청했다면 원래 캐싱했던 값을 반환해주고, 아니라면 새로운 key로 url을 등록하고 캐싱하게 됩니다.

위 설명이 url이 데이터를 캐싱하기 위한 유일한 key가 된다고 했던 말의 의미입니다.

⚙️ 전역 설정 방법

fetcher나 option들을 전역적으로 설정하는 방법입니다.
사용할 때는 오버라이딩해서 독립적으로 다른 fetcher나 option을 부여할 수 있습니다.

import { SWRConfig } from "swr";

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

const App = () => {
  return (
    <SWRConfig
      value={{
        fetcher,
      }}
    >
      // 이후 하위 컴포넌트들에서 SWR을 사용하면 전역적으로 지정한 세팅값이 들어갑니다.
      <Component />
    </SWRConfig>
  )
}

const Component = () => {
  // 전역적으로 fetcher를 지정했으므로 생략이 가능하고, 필요에 의해서 다른 fetcher를 적용할 수 있습니다.
  const { data, error } = useSWR<UserResponse>("https://jsonplaceholder.typicode.com/users/1");
  
  if(error) return <h3>Failed to load<h3>;
  if(!data && !error) return <h3>Loading<h3>;
  
  return (
    <section>
      <div>{data.name}</div>
      <div>{data.email}</div>
    </section>
  )
}

👉 useSWR() 사용법

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

/**
* data: fetcher를 실행한 성공적인 결과
* error: fetcher에서 발생한 오류
* isValidating: 요청이나 갱신 로딩의 여부
* mutate: 캐시된 데이터를 뮤테이트하기 위한 함수 ( 뮤테이트에 대해서는 뒤에서 설명 )
* key: url이자 캐싱을 구별하기 위한 유일한 key
* fetcher: 데이터를 가져오기 위한 Promise함수를 반환하는 함수 ( fetch, axios )
* options: 너무 많고 필자도 사용경험이 많지 않으므로 공식문서 참고 바람
*/

• SWR 공식문서

👀 자동 갱신 비활성화

import useSWR from "swr";
import useSWRImmutable from 'swr/immutable'

// 아래 두개는 안벽하게 같게 동작함
useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
});
useSWRImmutable(key, fetcher)

⛅ 조건부 데이터 가져오기

import useSWR from "swr";

useSWR(router.query.id ? `/api/users/${router.query.id}` : null, fetcher);
useSWR(() => router.query.id ? `/api/users/${router.query.id}` : null, fetcher);
// 위 두가지 방법 모두 가능
/*
* key로 문자열을 넘길경우 바로 key로 사용하고, null을 넘기면 요청을 하지 않음
* key로 함수를 넘길경우 반환값을 key로 사용하며, falsy인 값을 반환하면 요청하지 않음
* 단, 문자열을 넘길 때 정의되지 않은 값을 넘기면 오류 발생
* 예를 들면 router.query.id 값은 즉시 가져와지지 않으므로 undefined인 값이 들어갈 수 있음
* undefined를 바로 사용해서 요청하면 에러 발생
*/