SWR
: 데이터 가져오기를 위한 React Hooks
-
먼저 캐시로부터 데이터를 반환한 후, fetch 요청을 하고, 최종적으로 최신화된 데이터를 가져오는 전략
-
SWR를 사용하면, 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됨
-
UI가 항상 빠르고 반응적이게 반응하게 됨
-
전체적으로는 React Query가 더 😊 BUT 패키지 크기가 SWR의 3배가 넘기 때문에, 간단한 어플을 만들기에는 SWR이 good!!!!!!!
SWR 설치
npm i swr 또는
npm i swr --legacy-peer-deps
https://swr.vercel.app/ko/docs/getting-started
fetcher 함수
- JSON 데이터가 포함된 일반 Restfull API의 경우, 기본 fetch wrapper인 fetcher 함수를 만들어두어야함!!!
const fetcher = (...args) => fetch(...args).then(res => res.json());useSWR
: useSWR hook은 key 문자열과 fetcher 함수를 받음
- key : 데이터의 고유한 식별자 / 일반적으로 API URL
- fetcher : 이 부분은 데이터를 반환하는 어떠한 비동기 함수도 다 가능! (fech나 axios 같은거 사용 가능)
- fetcher는 기본적으로 내장된 이름이고, 데이터를 가져오는 함수를 가리켜.
- fetch 기능 외에 다른 기능들을 사용하고 싶다면, 따로 axios로 해당 함수를 만들고, 그 함수를 fetcher 자리에 넣으면 된다!
예를 들어서 아래 코드 처럼.
import axios from 'axios';
const axiosFetcher = async (url) => {
const response = await axios.get(url);
return response.data;
};
const { data } = useSWR('/api/data', axiosFetcher);- hook은 세 개의 값을 모두 반환함.
요청의 상태에 기반은 data, isLoading, error
import useSWR from 'swr'
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
return <div>hello {data.name}!</div>
}import useSWR from "swr";
// 이렇게 한 곳에 함수로 만들어서 모아두고 export할수도 있음
export const useData( ) => {
const {data, error, isLoading} = useSWR("api/users..", fetcher);
return data;
}useSWR & useEffect 비교
useSWR은 자체로 useEffect처럼 동작하기 때문에, useEffect의 하위에서는 사용할 수 XX
아래에 있는 2개의 코드는 동일하게 작동하는 2개의 코드.
// 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;- 장점 : 다른 페이지에서 작업중이어도, 다시 해당 페이지로 돌아오면 데이터가 변경이 되어있던 것들을 자동으로 다시 request해줘서 값들이 변경했던 것들을 확인해줌!
