React에서 비동기 데이터 관리하기 : SWR

 

 

🌈 SWR이란?

"SWR"이라는 이름은 HTTP RFC 5861(opens in a new tab)에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었고 SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다.

 

☀️ Redux와 SWR의 차이?

데이터를 관리한다는 목적에서 Redux를 사용하면 될텐데 SWR을 왜 사용할까 궁금했다.

 

- Redux 는 전역 상태 작업을 도와주는 state management 라이브러리이고, 

- SWR 은 서버 상태 작업을 도와주는 data fetching 라이브러리이다.(전역상태관리로도 사용은 가능함)

 

즉 Redux는 isOpenModal 처럼 local 안에서 전역적으로 상태를 관리할 때 사용하고

SWR은 server에 api를 요청하고 응답받은 데이터를 관리할 때 사용한다. 

SWR 대신 Redux-saga,Redux-thunk을 사용하지만 코드가 복잡해지는 관계로 SWR을 사용한다.

그래서 사용목적에 따라 Redux와 SWR(or react-query)을 함께 사용하기도 함.

 

⭐️ 사용방법?

npm i swr

import useSWR from 'swr'
import axios from 'axios'
 

function Profile () {
  
  const fetcher = (...args) => axios(...args).then(res => res.json())

  const { data, error, isLoading } = useSWR(apiURL, fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
 
  // 데이터 렌더링
  return <div>hello {data.name}!</div>
}

 

1) JSON 데이터를 사용하는 일반적인 RESTful API라면 먼저 네이티브 fetch의 단순한 래퍼인 fetcher 함수를 생성한다.

2) 그 다음, useSWR을 import하고 함수 컴포넌트 내에서 사용함.

3)useSWR에서 apiURL이 fetcher의 매개변수로 할당 됨. fetcher 함수는 비동기통신을 통해서 데이터를 가져옴.

4)fetcher함수를 통해 받아온 값은 data에 저장된다. 진행중이면 isLoading, 문제가 있으면 error

 

✨ 재사용가능하게 만들기?

웹 앱을 구축할 때, 다른 component에서 데이터를 재사용 해야할 때가 있다.

SWR로 재사용 가능한 데이터 hook을 만들어서 사용할 수 있음.

useUser.jsx 파일에 useUser 함수(fetcher 역할)를 만들어서 export해주고

내가 원하는 컴포넌트에서 import해서 재사용함.

//swr에서 사용할 fetcher함수를 만들어서 export해주기.
import useSWR from 'swr'


export function useUser (id) {
  const { data, error, isLoading } = useSWR(`/api/user/${id}`, fetcher)
 
  return {
    user: data,
    isLoading,
    isError: error
  }
}

export default useUser;

//useUser을 import해서 Avatar 컴포넌트에서 사용

import useUser from './useUser.jsx'

function Avatar ({ id }) {
  const { user, isLoading, isError } = useUser('/api/user')
 
  if (isLoading) return <Spinner />
  if (isError) return <Error />
  return <img src={user.avatar} />
}

//useUser을 import해서 Content 컴포넌트에서 사용

import useUser from './useUser.jsx'

function Content () {
  const { user, isLoading } = useUser('/api/user')
  if (isLoading) return <Spinner />
  return <h1>Welcome back, {user.name}</h1>
}

 

 

---

참고

https://swr.vercel.app/ko/docs/getting-started

https://min9nim.vercel.app/2020-10-03-swr-intro1/