[Next.js] 🕹️ SWR 상태관리 라이브러리 사용법.

목차

SWR은 무엇인가?

SWR이란 “Stale-While-Revalidate”라는 HTTP 캐시 무효화 전략에서 유래된 데이터 페칭을 위한 리액트 라이브러리이다.

SWR의 기본적인 작동은 우선 캐시(stale)에서 데이터를 불러오고, 검증을 위한 요청(revalidate)을 보내고, 마침내 최신 데이터로 업데이트하는 과정을 거친다. 또한 SWR을 사용하는 컴포넌트들은 지속적이고 자동적으로 데이터 업데이트가 이루어짐으로써 항상 최신 상태를 유지할 수 있게 된다.

---

SWR의 대표적인 장점

• 자동화가 간단하다.
• 가볍고 빠르기 때문에 데이터의 업데이트 또한 빠르게 이루어져 reactive한 환경을 갖출 수 있다.
• SSR(Server-Side-Rendering), SSG(Static-Site-Generation), ISR(Incremental-Static-Generation) 환경에서 모두 사용할 수 있다.
• 최근에 나온 React 18의 Suspense 등의 기능들과 호환된다.

---

설치 방법

다른 라이브러리들과 마찬가지로, 사용하고자 하는 프로젝트 폴더 안에서 터미널에 설치 코드를 입력해주면 된다.

Shell

yarn add swr

혹은

Shell

npm install swr

---

기본적인 사용법

key, fetcher, data, error

JavaScript

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

SWR을 사용할 때에는 기본적으로 4가지만 알면 되는데, 바로 예시에 있는 key, fetcher, data, error 이다.

---

key

요청을 보낼 주소를 의미한다.

JavaScript

const { data, error } = useSWR("/api/data", fetcher);

에서 '/api/data'에 해당하는 부분이다.

---

fetcher

SWR의 핵심적인 API로써, key를 받아 데이터를 반환하는 비동기 함수이다. 이 fetcher에는 데이터 페칭에 사용되는 Axios, GraphQL 등 어떠한 라이브러리든지 사용이 가능하다.

JavaScript

const fetcher = (url) => fetch(url).then((res) => res.json());

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

이런 식으로 fetcher 함수를 선언하고 사용할 수도 있고,

JavaScript

const { data, error } = useSWR(key, (url) => {
  fetch(url).then((res) => res.json());
});

이런 식으로 아예 useSWR 함수 내에 적어주어도 된다.

 

전역으로 fetcher 설정하기

매번 fetcher를 선언해주는 것은 번거로울 수 있다. 이 번거로움을 해소하기 위해 SWR은 SWRconfig 컨텍스트를 통해 전역 fetcher를 설정할 수 있게 해준다.

JavaScript

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

이렇게 SWRConfig로 감싸주는 컴포넌트에선 value에 전달하는 options의 내용이 전역 설정으로써 전달된다.

이를 활용하면 다음과 같이 fetcher를 전역으로 설정할 수 있다.

JavaScript

function App() {
  const options = {
    fetcher: (resource, init) =>
      fetch(resource, init).then((res) => res.json()),
  };
  return (
    <SWRConfig value={options}>
      <Home />
    </SWRConfig>
  );
}

이로써 <Home /> 컴포넌트 안에서 사용 되는 모든 useSWR은 제공된 fetcher를 사용하게 된다. 즉,

JavaScript

function Home() {
  const { data: first } = useSWR(firstKey);
  const { data: second } = useSWR(secondKey);
}

이 두 개의 useSWR은 fetcher를 작성하지 않아도 상술한 fetcher를 사용하고 있는 것이다.

---

data

useSWR에 의해 반환된 데이터를 의미한다.

---

error

데이터를 패칭하는 과정에서 오류가 발생할 시 반환된다.

---

사용 예시

서버로부터 사용자의 데이터를 가져와 화면에 출력해 주는 예시이다.

JavaScript

import useSWR from "swr";

const fetcher = (url) => fetch(url).then((res) => res.json());

function Profile() {
  const { data, error } = useSWR("/api/user/123", fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  return <div>Welcome, {data.name}!</div>;
}

이렇게 fetcher를 선언하고, data와 error를 받아온 후, 에러와 데이터를 활용하여 이름을 출력할 수 있다.

---

참고 문헌

• 1React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
• 2SWR을 어떻게 사용하고 있을까
• 3[Next.js] 상태 관리 라이브러리 SWR이란?