SWR로 Fetch하기
기존에 만든 포트폴리오를 보니, 불필요하게 Redux를 쓰고있지 않았나 생각이 들었습니다. Fetch 데이터들을 전역으로 관리하고 싶어서 Redux를 사용하긴했지만, 그러다보면 Redux가 어느새 data Fetch 셔틀로 변하는 것 같다는 생각이 들었죠. 언제나 효율을 생각해야하기 때문에 말로만 듣던 SWR을 도입해보려고 합니다.
공식문서를 계속 읽어보면서 이런저런 테스트를 많이 해봐야 하기때문에 오늘은 입문 입니다. SWR에 대해 흥미만 유발할 수 있도록 💡
SWR의 장점
- 전역으로 상태관리를 할 수 있습니다. key를 통해 데이터에 접근합니다.
- SWR은 polling 을 통해 주기적으로 최신 데이터 상태를 fetch 해줍니다.
- 페치 없이, 로컬의 캐시되어있는 데이터를 사용할수도 있습니다.
- mutate를 통해 데이터 갱신이 있을때, 다양한 조작이 가능 한 것 같습니다.
공식 페이지에 바로 예시코드가 있습니다.
그냥 그대로 끌고와서 async await 문법으로만 바꿔서 테스트 해보겠습니다.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import useSWR from 'swr'
import ItemList from './ItemList';
function App() {
const fetcher = async(urlKey) => {
const url = 'https://jsonplaceholder.typicode.com/posts';
const response = await fetch(url);
const result = await response.json();
return result
}
const {data,error,mutate} = useSWR('/get/posts',fetcher);
return (
<div className="App">
<ItemList/>
</div>
);
}
export default App;
ItemList.js
import React from 'react'
import useSWR from 'swr';
function ItemList() {
const {data,error} = useSWR('/get/posts');
console.log(data)
return (
<div>
</div>
)
}
export default ItemList
전역으로 cache된 데이터를 불러올 수 있는지 확인하기위해서 ItemList 컴포넌트를 두고 테스트를 해봤습니다.
첫렌더링 때 undefined , cache data를 불러오면서(리렌더링) 컴포넌트에 data가 잘 들어오네요!
useSWR의 매개변수로 key를 전달하면, 어느 컴포넌트에서나 해당 key에 cache되어있는(fetch된 데이터들) 데이터들에 접근할 수 있습니다.
또, 네트워크 탭을 확인해보면 주기적으로 계속 데이터를 fetch해오는 것을 볼 수 있습니다.
레퍼런스에 Mutate, SWR 옵션 객체 들을 꼼꼼히 읽어보고, 실제로 활용할 만한 상황에서 사용해보고 내용들을 추가해야 될 것 같습니다.
😭 오늘은 SWR 훅이 무엇인지만 알아보는걸로..
📚 레퍼런스
Author And Source
이 문제에 관하여(SWR로 Fetch하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sae1013/SWR로-Fetch하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)