React SWR 사용하기(기초!)

오늘은 SWR 을 사용하는 방법에 대해서 알아보겠습니다

SWR

SWR은 vercel에서 제작한, 데이터를 가져오기 위한 모듈입니다.

간단하게 SWR을 어떻게 사용하는 지에 대해 기록하려 합니다.

---

설치
npm i swr 혹은 yarn add swr을 이용해 설치 할수 있습니다.

---

📒 useSWR

SWR은 useSWR이란 hook을 이용합니다.

import useSWR from 'swr'

function users() {
  const { data, error } = useSWR(key, fetcher);
  
  // ...
}

useSWR 에서 인자로 받는 값과 반환하는 값들은 다음과 같습니다.

• key: SWR의 키, 요청을 보낼 URL이 해당됨
• fetcher: key값(URL)을 이용해 데이터를 가져오는 함수.
• data: 요청에 오류가 없는 경우 가져온 데이터
• error: 요청에 오류가 있을시에 반환할 내용

---

Example

Typescript

interface IUserData {
  id: number;
  name: string;
}

export default function user() {
  const fetcher = (url: string) => axios.get(url).then((res) => res.data);
  const { data, error } = useSWR<IUserData>("/호출할 API URL", fetcher);
  
  return <h1>{data.name}</h1>

---

📒 SWRConfig

key값(URL)을 이용해 데이터를 가져오는 함수 fetcher는 어디서든 동일하게 사용될것입니다.
똑같은 기능의 fetcher 함수가 필요할때마다 선언하는건 비효율적일수도 있습니다.
이 경우 SWR Config를 이용해 전역적인 설정을 해 줄 수 있습니다.

<SWRConfig value={options}>
  <APP/>
</SWRConfig>

위와 같은 형태로 전역적인 설정을 하고싶은 Component를 SWRConfig로 감싸고 value 값(fetcher 함수)에 원하는 값을 넣어주면 해당 Component안에서 전역적인 설정을 할수있습니다.

Example

import { SWRConfig } from "swr";
import axios from "axios";

function MyApp() {
  return (
    <SWRConfig
      value={{
        fetcher: (url: string) => axios.get(url).then((res) => res.data),
      }}
    >
      <APP />
    </SWRConfig>
  );
}

export default MyApp;

전역설정 이용하면 useSWR을 사용할시 fetcher 함수를 생략 할수 있습니다.

// SWRConfig 설정전
const { data, error } = useSWR<IUserData>("/호출할 API URL", fetcher);

// SWRConfig 설정후
const { data, error } = useSWR<IUserData>("/호출할 API URL");

---

참고자료

• 데이터 가져오기 : https://swr.vercel.app/ko/docs/data-fetching
• 전역설정: https://swr.vercel.app/ko/docs/global-configuration