처음 만난 Next.js 문서
8.2
Data Fetching
그렇다면 SWR은 어떻게 사용해야 할까요? SWR은 태생부터 리액트 훅 형태로 사용하도록 개발되었습니다. 그래서 아래와 같은 형태로 리액트 컴포넌트 내에서 곧바로 사용할 수 있습니다.
import useSWR from 'swr';
function Avatar() {
const { isLoading, data, error } = useSWR('/api/user', fetcher);
if (!isLoading) {
return <Spinner />;
}
if (error) {
return <div>에러 발생!</div>;
}
return <img src={user.avatar} alt={user.name} />;
}
useSWR() 훅의 파라미터로는 API 주소와 fetcher를 넘기면 되는데, fetcher는 서버로부터 데이터를 받아오는 역할을 하는 함수이며 별도로 구현해야 합니다. 아래와 같이 fetch를 직접 사용해서 구현하거나, Axios 같은 라이브러리를 사용해서 구현하면 됩니다.
// fetch 사용
const fetcher = (url) => fetch(url).then((res) => res.json());
// Axios 사용
import axios from 'axios';
const fetcher = (url) => {
return axios.get(url).then((response) => response.data);
};
useSWR() 훅은 파라미터로 전달받은 API 주소와 fetcher를 사용해서 서버로부터 데이터를 받아오고 캐싱을 해둡니다. 그리고 이미 캐싱된 데이터와 동일한 API 호출이 발생하면, 서버에 다시 요청하지 않고 캐싱된 데이터를 반환합니다. 하지만 캐싱된 데이터가 주기적으로 최신화(revalidate) 될 필요가 있기 때문에, 설정된 캐싱 정책에 따라 서버로부터 데이터를 받아오게 됩니다. 예를 들면, 브라우저에서 다른 탭에 갔다가 다시 돌아오거나, 특정 주기마다 갱신하거나, 다시 온라인 상태가 되었을 때 갱신하거나 등의 경우가 있습니다.
NOTE. 캐싱 여부를 어떻게 판단할까?
SWR에서는useSWR()훅의 첫 번째 파라미터인 API 주소 또는 API 주소와 파라미터 조합으로 키(key)를 생성합니다. 그리고 캐시에 데이터를 저장할 때는 이 키(key)에 대한 값(value)으로 저장하게 됩니다. 동일한 API 요청에 대해서는 키(key)도 동일하기 때문에 이 값으로 캐시된 데이터를 찾을 수 있는 것입니다. 아래 SWR 개발자 도구의 Cache 탭을 참고하면 이해하는데 도움이 될 겁니다.
마지막 업데이트: 2025년 10월 24일 02시 28분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page