💻SWR?

✅ 공식문서

SWR은 먼저 캐시로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다.

즉, axios나 fetch로 받아온 데이터가 캐싱되고 다시 데이터를 요청할 때 불필요한 요청을 하지 않고 캐싱된 값을 사용한다! 라고 이해했다. SWR의 빌트인 캐싱과 중복제거는 불필요한 네트워크 요청을 줄여준다.

useSWR 옵션

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

파라미터

• key : 요청을 위한 고유한 키 문자열(함수 ,배열, null 도 가능)
• fetcher : (옵션) 데이터를 가져오기 위한 함수를 반환하는 Promise
• options : (옵셥) SWR hook을 위한 옵션 객체

반환 값

• data : fetcher가 키를 인자로 받아 이행한 data(로드되지 않으면 undefined)
• error : fetcher가 던진 에러(또는 undefined)
• isValidating : 요청이나 갱신 여부
• mutate : 캐시 된 데이터를 뮤테이트하기 위한 함수

mutate?

mutate(key)를 호출하여 동일한 키를 사용하는 다른 SWR hook에게 갱신 메시지를 전역으로 브로드 캐스팅할 수 있습니다. 까지가 공식문서에 나와 있는 내용이다.
내가 이해한 내용은 예를들어 mutate("/api/user")라면 "/api/user"를 갖고있는 동일한 hook에게 갱신 메세지를 보낸다.

🤷‍♀️ 내가 이해한 mutate post 방법

최신 데이터로 로컬 업데이트 -> 업데이트 내용을 리모트 데이터 수정하기 위해 post요청 -> 리모트 데이터에서 가져온 정보로 갱신함(최신데이터 가져옴)

이런식으로 로컬과 리모트에 업데이트를 하면 클라이언트 입장에선 빠르게 느껴질 것이다...!

하지만 많은 POST API들은 업데이트 된 데이터를 직접 반환하기 때문에 다시 갱신할 필요가 없다.

mutate("api", nuwUser, false) // 로컬데이터만 업데이트하고 랜더

데이터 가져오기 예제

export const fetcher = (...args) => fetch(...args).then(res => res.json())

import useSWR from "swr"

function Profile(){
	const {data, error} = useSWR("API URL", fetcher); ///api url과 데이터를 반환하는 비동기 함수가 들어올 수 있다.ex) fetch, Axios
  
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  
}

이 예제에서 useSWR hook은 key문자열과 fetcher함수를 받는다.

key는 데이터의 고유한 식별자이며(일반적으로 API URL) fetcher에 인자로 전달된다.

기본 인자

인자

기본값으로 key는 인자로써 fetcher에 전달된다. 다음 세 가지 표현식은 동일하다.

useSWR('url', () => fetcher('/api/user'))
useSWR('url', url => fetcher(url))
useSWR('url', fetcher)

다중 인자

fetcher 함수에 여러 인자를 전달할 수도 있다.

:: Bad

• 데이터 식별자(/api/user)는 그대로이고 token이 변경되면 SWR은 여전히 동일한 키를 사용하기 때문에 잘못된 데이터를 반환한다.

useSWR('url', url => fetchWithToken(url, token))

:: Good

• 대신에 배열을 key파라미터로 사용하여 fetchWithToken에 인자로 보낼 수 있다.

const { data: user } = useSWR(['url', token], fetchWithToken)

에러처리

fetcher 안에서 에러가 발생했다면 hook에 의해 error로 반환된다.

export const fetcher = (...args) => fetch(...args).then(res => res.json())

const {data, error} = useSWR("URL", fetcher)

자동 갱신

포커스 시에 자동갱신

페이지에 다시 포커스하거나 탭을 전환할 때, SWR은 데이터를 자동 갱신한다.

즉 최신 상태로 즉시 동기화할 수 있다.

axios로 데이터를 받아오는 경우는 통신이 끝나고 데이터를 갱신하지 않았다.

인터벌 시에 갱신하기

SWR은 자동 데이터 다시 가져오기 옵션을 제공한다. hook과 관련된 컴포넌트가 화면상에 있을 때만 다시 가져오기가 발생한다.

:: 계속해서 업데이트