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 훅이 무엇인지만 알아보는걸로..

📚 레퍼런스

https://swr.vercel.app/ko/docs/