useSWR 형태

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

• key : API 요청을 보낼 문자열, localStorage 또한 사용이 가능하다.
• fetcher : fetcher는 axios, fetch API 요청을 보내는 로직이 필요하고 key를 매개변수로 한다. Promise 객체를 반환하는 함수를 입력해야 한다. (fetcher 는 자동으로 key를 매개변수로 한다)
• options : useSWR에 Option이다. API 요청이나 시간에 따른 캐시 데이터 삭제 재요청 등등.. 기능이 정말 많다

.1 내장 캐싱과 중복 제거 기능

function useUser () {
  return useSWR('/api/user', fetcher)
}

function Avatar () {
  const { data, error } = useUser()

  if (error) return <Error />
  if (!data) return <Spinner />

  return <img src={data.avatar_url} />
}

function App () {
  return <>
    <Avatar />
    <Avatar />
    <Avatar />
    <Avatar />
    <Avatar />
  </>
}

위 코드에서는 네트워크 요청은 단 한번만 발생한다. useSWR은 첫 번째 인자로 key(보통은 요청 url을 key 값으로 가짐)를 받는데, 동일 키의 중복 호출 시 중복을 제거하는 과정을 처리하기 때문이다.

.2 포커스 시에 갱신 & 네트워크 재연결 시에 자동 데이터 갱신

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

최신 상태로 즉시 동기화 시킬 수 있어서 유용하며, 오래된 모바일 탭 또는 슬립 모드 상태인 노트북과 같은 상태에서 데이터를 새로 고치는데 유용하다. revalidateOnFocus 옵션을 통해 비활성화 할 수 있으며, 기본값은 활성화(true) 상태이다.

또한, 네트워크가 오프라인에서 온라인으로 돌아올 때 데이터 갱신이 가능하다. 사용자가 컴퓨터를 해제하고 인터넷이 아직 연결되지 않았을 때를 예로 들 수 있다. 데이터를 항상 최신으로 보장하기 위해 네트워크가 회복될 때 SWR는 자동으로 갱신된다. 이 기능은 기본적으로 활성화되어 있으며, revalidateOnReconnect 옵션을 이용해 비활성화 할 수 있다.

.3 실시간 페이지 업데이트

SWR은 데이터를 다시 가져오는 폴링을 옵션으로 제공해, 페이지 실시간 업데이트를 구현하기 편하다.

단, hook과 관련된 컴포넌트가 화면 상에 있을 때만 다시 가져옴으로써 불필요한 호출(fetch)이 발생하지 않게 한다.

refreshInterval 옵션을 통해 활성화 할 수 있다. (값 ms[밀리세컨즈]마다 새로 갱신)

useSWR('/api/todos', fetcher, {refreshInterval:1000}); // 1초마다

useSWR로 상태관리

import useSWR from 'swr'

export default () => {
  const {data, error} = useSWR('/api/points', url => {
    return fetch(url).then(res => res.json())
  })
  return {data, error}
}

// useUsers.js
import useSWR from 'swr'

export default () => {
  const {data, error} = useSWR('/api/users', url => {
    return fetch(url).then(res => res.json())
  })
  return {data, error}
}

이렇게 각 원격상태를 독립적으로 만들어주어서 상태관리가 가능하다.

~~수정중