SWR 정리

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

데이터 가져오기를 위한 React Hooks라고 적혀있듯, SWR은 데이터 가져오기에 특화된 Hook이다.
Post가 불가능 한 것은 아니지만, Axios등에 비해 큰 이점이 없다.

Axios를 사용한다면, 필요할 때마다 API를 호출해야 데이터가 갱신되지만, SWR은 여러 경우에서 자동으로 재검증을통해 데이터를 업데이트 해주는 기능이 있음.

SWR의 기본적인 사용방법

const fetcher = (...args) => fetch(...args).then(res => res.json())

-> fetcher는 데이터를 불러오는 함수, axios, fetch 등 어떤것을 이용해도 상관없으며 데이터를 불러오는 기능만 수행하면 된다.

{ data, error } = useSWR(key, fetcher)

key : 일반적으로는 데이터를 불러오는 API의 URL을 key로 사용한다.
fetcher : 데이터를 불러오는 함수

data : 데이터 요청의 반환값, 캐시된 데이터(?) 또는 새롭게 받은 데이터를 반환한다.
error : fetcher에서 반환된 에러, SWR라이브러리 기능 중 에러가 발생했을때 수행해주는 로직이 따로 있음

SWR의 장점 : 자동 갱신

1. 네트워크가 복구 될 때 자동으로 데이터를 재검증
2. Page를 다시 포커스하거나, Tab을 변경하였을 때 재검증
3. 설정한 간격마다 데이터를 다시 불러온다.

useEffect
import React from 'react';
import { useState, useEffect } from 'react';
import { getData } from './lib/api';

const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const data = getData();
    setData(data);
  });
  
  return <div>{data.name}</div>;
}

export default App;

//useSWR
import useSWR from 'swr';
import { fetch } from './lib/api';

const App = () => {
  const { data } = useSWR('api/data/', fetch);
  
  return <div>{data.name}</div>;
}

export default App;

데이터를 불러오는 간단한 예제,
1:UseEffect
2:UseSWR
둘다 데이터를 받아오는 동작을 수행

조건부 가져오기

const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher)

useSWR의 기본형인

const {data, error} =useSWR(key, fetcher);

에서 key 부분에 함수를 넣어줄 수 있고, 함수가 falsy를 반환하면 SWR은 데이터 요청을 시작하지 않습니다. 이를 이용해서 조건부로 데이터를 요청하거나 요청하지 않게 만들 수 있습니다.

조건부 가져오기 (의존)

function MyProjects () {
  const { data: user } = useSWR('/api/user')
  const { data: projects } = useSWR(() => '/api/projects?uid=' + user.id)

  if (!projects) return 'loading...'
  return 'You have ' + projects.length + ' projects'
}

이 경우 user가 먼저 로드 되지 않았을 경우에는

user.id부분에서 에러를 던지게 되므로, project는 불러와지지 않습니다. (key가 falsy인 경우);

다음과 같은 코드형태로도 key를 fetcher에 전달할 수 있습니다.

const { data: projects } = useSWR({ url: '/api/projects', args: user }, fetcher)

fetcher함수 내에서 url, args 값을 사용할 수 있습니다.

 const { data: projects } = useSWR(() => '/api/projects?uid=' + user.id) 대신
 const { data: projects } = useSWR({ url: '/api/projects', args: user }, fetcher) 로 작성한 뒤,
 fetcher함수 내에서 args를 url뒤에 붙여주면 두 줄의 코드가 같은 동작을 수행합니다.