반응형
글을 쓰다가 글의 길이 길어져 활용하는 부분은 다른 페이지로 만들어 작성하고자 한다.
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;
화면 보기
두 개의 페이지가 제대로 뜨는 것을 확인했다면 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.-무한스크롤
반응형