useSWR 리액트 훅 데이터 라이브러리

useSWR 사용하기

useSWR 은 한번 fetch 한 원격상태의 데이터를 내부적으로 캐시하고 다른 컴포넌트에서 동일한 상태를 사용하고자 할 경우 이전에 캐시했던 상태를 그대로를 리턴한다.

  const { data } = useSWR(
    "https://jsonplaceholder.typicode.com/posts",
    url =>
      fetch(url)
        .then(_ => _.json())
        .then(sleep),
    { suspense: true }
  );

‌

 

useSWR 특징

• Lightweight
• Backend agnostic
• Realtime
• JAMstack oriented
• Suspense
• TypeScript ready
• REST compatible
• Remote + Local

useSWR 장점

서로 다른 컴포넌트가 동일한 상태를 공유할 수 있다.

여러 컴포넌트들에서 모두 동일하게 원격의 상태를 공유

 

데이터 받아오기

import useSWR from '@zeit/swr'

function Profile () {
                                               1️⃣ 👇
  const { data, error } = useSWR('/api/user', fetch)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

useSWR은 a key와 fetch 함수를 받는다. 

키는 데이터의 고유 식별자이며 일반적으로 API의 URL이다.

그런 다음 키가 fetch 에 전달되어 데이터를 비동기적으로 반환한다.

 

const getRandomDog = url => fetch(url).then(_ => _.json());

// https://swr.now.sh/#basic-data-loading
function BasicDataLoading() {
  const { error, data } = useSWR(
    `https://dog.ceo/api/breeds/image/random`,
    getRandomDog
  );

  return (
    <>
      {error && <p>Error! {error}</p>}
      {data && data.status === "success" && (
        <img src={data.message} alt={data.message} />
      )}
    </>
  );
}