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의 장점 : 자동 갱신
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뒤에 붙여주면 두 줄의 코드가 같은 동작을 수행합니다.