[React] SWR을 활용하기

글을 쓰다가 글의 길이 길어져 활용하는 부분은 다른 페이지로 만들어 작성하고자 한다.

SWR 활용하기

우선은 파일을 새로 만든다. 아래의 코드를 작성하여 새로운 react 파일을 만든다.

npx crate-react-app {생성하고자 하는 파일 이름}

폴더 셋팅

폴더 셋팅한 모습

위와 같이 폴더를 셋팅하였다.

pages/Main.js

import React from "react";

const Main = () => {
  return <div>Main</div>;
};

export default Main;

반응형

pages/Detail.js

import React from "react";

const **Detail** = () => {
  return <div>**Detail**</div>;
};

export default **Detail**;

pages/index.js

export { default as Main } from "./Main";
export { default as Detail } from "./Detail";

pages의 index.js를 이렇게 정의해두는 이유는 pages의 내용들을 App.js에서 한 번에 호출하기 위해서이다.

App.js

npm i react-router-dom

설치하고 아래의 코드를 app.js에 넣어준다.

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Main, Detail } from "./pages";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
    </Router>
  );
};

export default App;

화면 보기

Main파일의 모습

Detail파일의 모습

두 개의 페이지가 제대로 뜨는 것을 확인했다면 libs 폴더의 파일을 작성해야 한다.

api 사용하기

설치

npm i swr

swr을 사용하기 위해서 swr을 설치한다.

libs폴더 파일 셋팅하기

libs/fetch.js

export const fetcher = async (url) => {
  const res = await fetch(url);

  if (!res.ok) {
    const error = new Error("[FAIL] fetch data");
    error.info = await res.json();
    error.status = res.status;
    throw error;
  }
  return res.json();
};

• !res.ok : 오류가 발생했을 때
• error : 에러가 발생했을 때 에러 구문을 작성해준다.
• error.info : 데이터의 json을 가져와서 error.info에 넣어준다. 즉, 오류 객체를 담는다.
• error.status : 오류 상태코드를 담는다.

libs/api.js

import useSWR from "swr";
import { fetcher } from "./fetch";

export const GetData = () => {
  const { data, error } = useSWR(
    "<https://api.github.com/repos/vercel/swr>",
    fetcher,
    {
      onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
        if (error.status === 404) return;
        if (retryCount >= 10) return;
        setTimeout(() => revalidate({ retryCount }), 5000);
      },
    }
  );
  if (error) return "[FAIL] get data";
  if (!data) return "[FAIL] no data";
  return data;
};

• swr를 사용하기 위하여 모듈을 임포트해온다. 그리고 오류 발생시 설정해주어야 하므로 fetch를 가져온다.
• key : 여기서 쓰인 url은 vercel 공식문서의 swr의 api를 가져온 것이다.
• onErrorRetry
  • error.status : 404, 즉 에러코드가 뜬다면 그대로 리턴한다.
  • retryCount : 최대 10번까지 url을 시도해주고 안된다면 그대로 리턴한다.
  • setTimeout : 5초에 한번 재검증을 해준다.

데이터 확인하기

pages/Main.js

import React from "react";
import { GetData } from "../libs/api";

const Main = () => {
  const data = GetData();
  console.log(data);
  return <div>Main</div>;
};

export default Main;

위와 같이 작성하며 웹 페이지의 콘솔에서 데이터를 확인할 수 있다.

콘솔에 찍힌 데이터

pages/Main.js

import React from "react";
import { GetData } from "../libs/api";

const Main = () => {
  const data = GetData();
  return (
    <div>
      <h5>id : {data.id}</h5>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
};

export default Main;

실행 결과

아래와 같이 데이터를 잘 가져옴을 확인할 수 있다.

실행 화면

오류 보기

만약 데이터가 잘못 받아오는 경우가 존재한다. 그럴 경우에는 아래와 같이 data를 셋팅을 하여 오류를 볼 수 있도록 설정할 수 있다.

pages/Main.js

import React from "react";
import { GetData } from "../libs/api";

const Main = () => {
  const data = GetData();
  // console.log(data);
  return (
    <div>
       <p>{data}</p> 
      <h5>id : {data.id}</h5>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
};

export default Main;

오류 실행 화면

오류가 났을 때의 화면

🔗 참고

https://velog.io/@soryeongk/ReactSWRTutorial

https://velog.io/@heather128/React-데이터-패칭-라이브러리-SWR-Feat.-무한스크롤