SWR 시작하기

SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.
그리고 UI는 항상 빠르고 반응적입니다.

SWR은 Next.js를 만든 팀이 개발한 React 프레임워크다.
SWR은 빠르고, 가볍고, 재사용이 가능하고 반응적이다.

SWR 시작하기

설치

React or Next 프로젝트 폴더 안에서 다음을 실행한다.

npm i swr
yarn add swr

빠른시작

useSWR을 import하고 함수 컴포넌트 내에서 사용하여 시작하면 된다.

import useSWR from "swr"

function Profile(){
	const {data, error } = useSWR('/api/user/123', fetcher)
	
	if(error) return
	
	return data

재사용 가능하게 만들기

웹 앱을 구축할 때, UI의 많은 곳에서 데이터를 재사용할 필요가 있을 것이다.
SWR 위에서는 재사용 가능한 데이터 hook을 만드는 것이 정말 쉽다.

// Hook
function useUser (id) {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher)

  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }
}

// component
function Avatar ({ id }) {
  const { user, isLoading, isError } = useUser(id)

  if (isLoading) return <Spinner />
  if (isError) return <Error />
  return <img src={user.avatar} />
}