React와 함께 SWR을 사용하는 방법

소개

프론트 엔드 개발자라면 당연히 프로젝트에서 Axios 라이브러리를 한 번 이상 사용합니다.
Axios는 훌륭하고 API를 다루는 최고의 라이브러리 중 하나이지만 Axios보다 나은 라이브러리가 있다고 말하면.
자, 시작합시다...

SWR이란 무엇입니까?

SWR은 stale-while-revalidate의 바로 가기이며 원격 데이터 가져오기를 위한 React Hooks 라이브러리입니다.

SWR에는 세 가지 주요 단계가 포함됩니다.
1- 도용: 캐시에서 데이터를 반환합니다.
2- 가져오기 요청 보내기 재검증.
3- 마지막으로 최신 데이터가 제공됩니다.

Now If You Wonder, Why I should use SWR?
I am still Fine With Axios.

SWR이 Axios와 다르다는 것을 알아야 할 사항 Axios의 상위 집합이라고 생각할 수 있으므로 Axios를 일부로 사용할 수 있습니다.
SWR에는 Axios에는 없었던 다음과 같은 많은 기능이 포함되어 있습니다.

빠르고 가볍고 재사용 가능한 데이터 가져오기

기본 제공 캐시 및 요청 중복 제거

실시간 체험

전송 및 프로토콜 불가지론

SSR/ISR/SSG 지원
-TypeScript 지원

리액트 네이티브

빠른 페이지 탐색

간격 폴링

데이터 종속성

초점 재검증

네트워크 복구 시 재검증

국소 돌연변이(낙관적 UI)

스마트 오류 재시도

페이지 매김 및 스크롤 위치 복구

리액트 서스펜스

... 등

SWR 사용React Suspense 응답이 준비되고 이 시간 동안 폴백 값을 제공할 때까지 React 구성 요소가 렌더링되지 않도록 하는 기술입니다.

SWR 설치?

먼저 터미널에서 다음 명령으로 React 프로젝트를 만듭니다.

npx create-react-app ./swr-project && cd swr-project

그런 다음 다음 명령으로 SWR을 설치합니다.

npm i swr

React SWR이 무엇이고 프로젝트에 설치하는 방법을 알고 나면 예제를 살펴보겠습니다.

//* Imports
import axios from "axios";
import useSWR from "swr";

//* Set Axios Base URL
const apiEndPoint = "https://jsonplaceholder.typicode.com";
axios.defaults.baseURL = apiEndPoint;

//* Fetcher Function
const fetcher = (url) => axios.get(url).then((res) => res.data);

function Users() {
  const { data: users, error } = useSWR("/users", fetcher);

  if (error) return <h1>Error!</h1>;
  if (!users) return <h1>Loading...</h1>;

  return (
    <div>
      <h1>Users</h1>
      {users.map((user) => {
        return <h2>{user.name}</h2>;
      })}
    </div>
  );
}

export default Users;

위의 예에서는 useSWR React Hook을 사용하여 가짜 API를 제공하는 웹사이트JSON Placeholder에서 사용자 데이터를 가져옵니다.
보시다시피 useSWR() Hook은 두 가지 인수를 취합니다.

URL 및 해당 API 끝점(이 경우 사용자 API)

Fetcher 기능 이것은 SWR이 다른 API에서 데이터를 가져오는 데 사용하는 기능입니다.
fetch() 또는 Axios ..etc

와 같은 모든 라이브러리를 가져오기 함수로 사용할 수 있습니다.

그리고 우리에게 두 가지 가치를 제공하십시오:

데이터

오류

SWR이 React Suspense Technique를 사용하기 전에 말했듯이 데이터를 성공적으로 가져올 때까지 대체 값을 추가하여 표시할 수 있습니다. 이 예에서는 Loading... Word만 표시하지만 멋진 로딩 애니메이션으로 바꿀 수 있습니다.
따라서 프로젝트를 실행하여 다음 결과를 확인하십시오.

Notice that you should handle error and loading values before your react component main content.

가져오기 기능을 전역으로 만들기

SWR 기능 중 하나는 가져오기 기능을 프로젝트에서 전역으로 만들 수 있다는 것입니다.
SWR은 가져오기 기능을 가져오고 모든 프로젝트 구성 요소 간에 이를 공유하는 SWRconfig라는 컨텍스트를 소개합니다. 예를 들어 이해해 보겠습니다.

앱:

//* Imports
import React from "react";
import { SWRConfig } from "swr";
import axios from "axios";
import Users from "./Users";

//* Set Axios Base URL
axios.defaults.baseURL = "https://jsonplaceholder.typicode.com/";

function App() {
  const fetcher = (url) => axios.get(url).then((res) => res.data);

  return (
    <SWRConfig
      value={{
        fetcher,
      }}
    >
      <Users />
    </SWRConfig>
  );
}

export default App;

앱 구성 요소의 경우 SWR에서 SWRconfig 연락처를 가져온 다음 앱 구성 요소를 래핑한 다음 가져오기 기능을 추가합니다.

이제 사용자 구성 요소에서 가져오기 기능 없이 구성 요소에서 SWR을 사용할 수 있습니다.

사용자:

//* Imports
import useSWR from "swr";

function Users() {
  const { data: users, error } = useSWR("/users");

  if (error) return <h1>Error!</h1>;
  if (!users) return <h1>Loading...</h1>;

  return (
    <div>
      <h1>Users</h1>
      {users.map((user) => {
        return <h2>{user.name}</h2>;
      })}
    </div>
  );
}

export default Users;

Fetcher가 SWR로 작동하도록 합니다.

이제 향후 프로젝트에서 사용할 Fetcher 기능을 만들어 보겠습니다.
우리 함수는 URL을 가져오고 세 가지 주요 값을 반환합니다.

데이터

IsError

isLoading

//* Imports
import useSWR from "swr";
import axios from "axios";

//* Fetcher Function
const fetcher = (url) => axios.get(url).then((res) => res.data);

const useFetch = (url) => {
  const { data, error } = useSWR(url, fetcher);

  return {
    data: data,
    isLoading: !data && !error,
    isError: error,
  };
};

export default useFetch;

Notice That our Fetcher Function uses an useSWR() hook so you should use it only in react components.

결론

마지막으로 우리는 SWR에 대해 페이지 매김 및 유효성 재확인 등과 같은 많은 다른 기능이 있으므로 SWR에 대한 간단한 소개를 알고 있습니다.
다음 기사에서 뵙겠습니다.