SWR

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

SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다. 그리고 UI는 항상 빠르고 반응적입니다.

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

SWR 설치

npm i swr 또는
npm i swr --legacy-peer-deps

https://swr.vercel.app/ko/docs/getting-started

전체적으로 React Query가 더 좋지만 패키지 크기가 SWR의 3배가 넘기 때문에 간단한 어플리케이션 만들기에는 SWR가 좋고, 많은 커스텀 기능들이 필요하면 React Query가 사용하기 좋은거 같습니다

useSWR의 장점, 다른 페이지에서 작업중이여도, 다시 해당 페이지로 돌아오게 된다면,

데이터가 변경이 되어있던 것들을 자동으로 request해주어서 값들이 변경했던것들을 확인해준다.

간단하게 useSWR를 사용하는 방법을 알아보자면,

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then(response => response.json());
export default function useUser() {
  const { data, error } = useSWR("api/users/me", fetcher);

  return data;
}

useSWR은 인자를 2개를 받는다. 하나는 key 이자 하나는 fetcher

key = RESTful API 주소가 해당이 된다.

fetcher = fetch되어 나온 함수를 의미한다.

그러므로 2개의 인자를 적게되면, useSWR의 첫번째 인자로 들어있는 argument를 자동으로 fetcher에 인자로 넘어가 값을 넣어주기에 자동적으로 fetcher가 실행이 된다.

useSWR로 받을 수 있는 값들은 data, error, mutate가 있다.

Global Configuration

그러나 이 모든 파일에 useSWR의 key을 변경하기에는 매우 수고스러움이 있기에,

모든페이지에 적용되어 fetcher 같은 것의 기본값을 지정할수 있는 프로바이더를 설정해야한다.

그것은 Global Configuration 이다.

만약 이것을 사용한다면, react에서 index의 모든 전역에게 프로바이더를 설정했던거와 같이

Next의 _app에서 전역으로 프로바이더를 설정해주어야 한다.

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SWRConfig } from "swr";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig value={{ fetcher: (url: string) => fetch(url).then(response => response.json()) }}>
      <div className="w-full max-w-xl mx-auto">
        <Component {...pageProps} />
      </div>
    </SWRConfig>
  );
}

export default MyApp;

mutate 활용

const { data, mutate } = useSWR(API키 , fetcher)

mutate를 불러올수 있다.

mutate란 ? API를 가지고서 RESTful API 상태관리를 해주는 함수이다.

mutate에는 2개의 인자를 받아오게 된다.

mutate({첫번째 오는 인자는 새로운 데이터가 된다.}, true)
그 후 첫번째 인자로 오는 데이터로 인해 컴포넌트의  UI는 새로고침이 된다.

mutate({ product: { name: "potato" } }, true);
예를 들어 이런식으로 name을 potato라고 적었다면,
data에는 potato라는 값으로 새로 바뀌게 된다.

두번째로 오는 true의 인자 같은 경우 SWR이 API로 가서 원래 했던,
요청을 다시 한번 재검증하는 요청이다.