useSWR(CSR) 사용하기

useSWR

Data Feching 라이브러리로써 배워볼 기회가 생겨 사용법을 작성합니다
SWR는 데이터를 가져오는데 특화되어 있는 라이브러리이며 axios를 대체할 수도 없고 useEffect안에서 사용할 수 없기에 막 사용하기도 힘듭니다(사실 그냥 쓰기만 해도 useEffect처럼 동작합니다)
결국 axios를 버리고 SWR만 사용할 순 없지만 충분히 매력적이고 좋은 기능이 많은 라이브러리라고 생각됩니다

기능

SWR 함수는 2개의 인자를 필수적으로 받습니다

• 화면에 포커싱이 되면 자동으로 SWR이 Data Fetch를 해서 실시간으로 변화시켜줍니다

• 주기적인 호출가능

  • 위처럼 포커싱 됬을때 데이터 갱신이 되긴하지만 설정에 따라 원하는 순간에 revalidate할 수도 일정 시간 간격으로 revalidate할 수도 있습니다

    import useSWR from 'swr';
    import fetch from '../libs/fetch';
    
    export default function myApp() {
      const { data, revalidate } = useSWR('/api/test', fetch, {
            refreshInterval: 1000 // 1초마다 갱신
      });
    
      return ( ... )
    }

• 오류 발생시 Error에 대해 반환하여 예외 처리가 가능합니다

• 캐시된 데이터를 이용합니다
  최초에 데이터를 수집한 후 캐시된 데이터를 통해 자동적으로 revalidate해서 데이터의 상태를 유지해줍니다

문법

useSWR(key, fetcher, option)

key: fetcher에게 전달되는 인자로써 URL이 주로 사용됨
fetcher: 데이터를 fetch하는 함수 주로 axios가 사용됨
option: revalidate, mutate, initialData 등이 사용됨

*잘못된 내용은 댓글로 알려주세요!