SWR 1.0 발표

약 2년 전에 우리는 사람들이 사랑하는 조그만 데이터 가져오기 React 라이브러리인 SWR을 오픈 소스로 공개 (opens in a new tab)했습니다. 오늘 우리는 SWR 버전 1.0이라는 또 다른 마일스톤에 도달하였습니다!

새로운 것

더 작은 크기

성능은 SWR의 가장 중요한 특징 중 하나입니다. 1.0에서는 기존 기능 중 어떠한 기능도 제거하지 않으면서 눈에 띄게 더 작게 만들었습니다.

• 41% 더 작은 코어(gzip시에 24% 더 작음, 3.9 kB)
• 52% 더 작은 패키지 설치 크기
• 향상된 트리 셰이킹

라이브러리를 가볍게 해야 하는 여러 가지 이유가 있습니다. 여러분의 애플리케이션은 더 작은 번들, 기민한 런타임, 더 작은 node_modules 디렉토리를 갖게 됩니다.

또한 패키지 번들링을 개선하여 path 임포트를 지원합니다.

import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'

useSWRInfinite을 사용하지 않을 경우, 애플리케이션에 포함되지 않습니다.

Fallback 데이터

1.0에는 특정 키를 사용하는 SWR hook의 초기 값으로 미리 가져온 데이터를 제공할 수 있는 새로운 fallback 옵션이 있습니다.

<SWRConfig value={{
  fallback: {
    '/api/user': { name: 'Bob', ... },
    '/api/items': ...,
    ...
  }
}}>
  <App/>
</SWRConfig>

SSG, SSR, 테스트를 위한 데이터 목업과 같은 시나리오에서 아주 유용합니다. 자세한 내용은 Next.js SSG, SSR 문서를 확인하세요.

일관성을 높이고 혼동을 방지하기 위해 이전의 initialData를 fallbackData로 이름을 변경하였으며 주어진 hook에 대한 단일 fallback 값도 여전히 제공합니다.

Immutable 모드

때때로 리소스가 변경되지 않을 경우 이를 불변으로 표시하고 싶을 수 있습니다. 이를 위해 재검증은 단 한 번만 하고, 자동 재검증은 비활성화하는 것이 좋습니다. 이제 이를 더 쉽게 해주는 헬퍼 hook이 있습니다.

import useSWRImmutable from 'swr/immutable'
 
// ...
 
useSWRImmutable(key, fetcher, options)

useSWR hook과 완전히 동일한 API가 있지만, 탭 포커스나 네트워크 복구 시 재검증을 하지 않습니다. 또한 새로운 옵션인 revalidateIfStale을 사용해 동작을 정확하게 제어할 수 있습니다. 더 많은 정보는 여기를 참고하세요.

커스텀 캐시 제공자

기본값으로 SWR은 단일 전역 캐시를 사용하여 모든 데이터를 저장합니다. 1.0에서는 새로운 provider 옵션으로 이를 커스터마이즈 할 수 있습니다.

<SWRConfig value={{
  provider: () => myCache
}}>
  <App/>
</SWRConfig>

이 새로운 기능으로 많은 강력한 작업들을 수행할 수 있습니다. 여기 몇 가지 예제가 있습니다: 정규식을 사용하여 여러 키 변경하기, LocalStorage 기반의 영구 캐시, 테스트 간 캐시 초기화.

새로운 캐시 제공자 API는 React 18의 동시 렌더링과도 더욱 호환됩니다. 캐시 제공자를 추가하는 경우, useSWRConfig()에서 반환된 전역 mutate 함수를 사용해야 합니다.

더 자세한 내용은 캐시 제공자 문서를 참고하세요.

useSWRConfig()

현재 캐시 제공자 및 전역 mutate 함수를 포함해 모든 전역 구성을 반환하는 새로운 Hook API입니다.

import { useSWRConfig } from 'swr'
 
function Foo () {
  const { refreshInterval, cache, mutate, ...restConfig } = useSWRConfig()
 
  // ...
}

더 자세한 내용은 여기를 참고하세요.

미들웨어

SWR 미들웨어는 SWR hook 위에서 추상화를 구축하고 재사용할 수 있는 새로운 방법을 제공합니다.

<SWRConfig value={{ use: [...middleware] }}>
 
// ... or directly in `useSWR`:
useSWR(key, fetcher, { use: [...middleware] })

이 기능으로 많은 새로운 아이디어를 구현할 수 있습니다. 몇 가지 예제를 만들어 두었습니다: Request Logger, 키가 변경될 때 이전 데이터 유지하기, and 객체 키 직렬화.

더 자세한 내용은 미들웨어 API를 참고하세요.

개선점 및 더 나은 테스트 커버리지

0.x 이후로 수백 가지의 작은 개선과 버그 수정을 진행했습니다. SWR은 현재 157개의 테스트를 통해 데이터 가져오기에서 대부분의 에지 케이스들을 다룹니다. 더 자세한 내용은 Changelog (opens in a new tab)를 참고하세요.

문서 번역

컨트리뷰터 (opens in a new tab) 및 Nextra의 i18n 기능 (opens in a new tab) 덕분에, 이제 SWR 문서를 6개의 다른 언어로 제공할 수 있습니다.

• 영어 (opens in a new tab)
• 스페인어 (opens in a new tab)
• 간체 중국어 (opens in a new tab)
• 일본어 (opens in a new tab)
• 한국어 (opens in a new tab)
• 러시아어 (opens in a new tab)

마이그레이션 가이드

useSWRInfinite 임포트 업데이트

useSWRInfinite는 swr/infinite로부터 임포트 해야 합니다.

- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'

해당하는 타입을 사용하는 경우, 마찬가지로 임포트 경로를 업데이트하세요.

- import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr'
+ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr/infinite'

revalidate를 mutate로 변경

useSWR은 더 이상 revalidate 메서드를 반환하지 않습니다. mutate로 변경하세요.

- const { revalidate } = useSWR(key, fetcher, options)
+ const { mutate } = useSWR(key, fetcher, options)
 
 
  // ...
 
 
- revalidate()
+ mutate()

initialData를 fallbackData로 이름을 변경

- useSWR(key, fetcher, { initialData: ... })
+ useSWR(key, fetcher, { fallbackData: ... })

더 이상 기본 Fetcher 없음

SWR은 더 이상 기본 fetcher를 제공하지 않습니다(데이터를 JSON으로 파싱 하는 fetcher 호출). 가장 쉬운 마이그레이션 방법은 <SWRConfig> 컴포넌트를 사용하도록 변경하는 것입니다.

<SWRConfig value={{ fetcher: (url) => fetch(url).then(res => res.json()) }}>
  <App/>
</SWRConfig>
 
// ... or
useSWR(key, (url) => fetch(url).then(res => res.json()))

Hook 반환 mutate 사용 권장

긴급한 변경 사항은 아니지만, 항상 useSWRConfig hook으로부터 반환된 mutate를 사용할 것을 권장합니다.

- import { mutate } from 'swr'
+ import { useSWRConfig } from 'swr'
 
 
  function Foo () {
+   const { mutate } = useSWRConfig()
 
    return <button onClick={() => mutate('key')}>
      Mutate Key
    </button>
  }

캐시 제공자를 사용하지 않을 경우, 현재 전역 임포트 import { mutate } from 'swr'는 여전히 동작합니다.

이름이 변경된 타입들

TypeScript를 사용하고 있다면, 일관성을 위해 다음 타입명이 변경되었습니다.

베타 및 비공식 기능 사용자

베타 버전의 SWR를 사용하고 있거나 문서화되지 않은 API를 사용하고 있다면, 다음 변경사항을 유의하세요.

• import { cache } from 'swr'은 제거되었습니다. 새로운 useSWRConfig API를 사용하세요.
• import { createCache } from 'swr'은 제거되었습니다. 새로운 캐시 제공자 API를 사용하세요.
• revalidateWhenStale은 revalidateIfStale로 이름이 변경되었습니다.
• middlewares는 use로 이름이 변경되었습니다.

변경 로그

전체 변경 로그는 GitHub (opens in a new tab)을 참고하세요.

향후 계획

향후 릴리즈에서도 라이브러리의 안정성을 유지하면서 개선해 나갈 것입니다. 또한 1.0에 이미 추가된 몇 가지 새로운 기능과 개선과 같이 향후 React 버전도 채택할 예정입니다. 또한 React에서 데이터를 가져오는 경험과 라이브러리를 사용하는 경험을 개선하기 위한 새로운 기능도 개발 중입니다.

이 릴리즈에 대한 의견이 있으시면 알려주세요 (opens in a new tab).

감사합니다!

라이브러리에 기여해주신 Toru Kobayashi (opens in a new tab), Yixuan Xu (opens in a new tab) 그리고 문서 및 번역에 기여해주신 Paco Coursey (opens in a new tab), uttk (opens in a new tab), Tomohiro SHIOYA (opens in a new tab), Markoz Peña (opens in a new tab), SeulGi Choi (opens in a new tab), Fang Lu (opens in a new tab), Valentin Politov (opens in a new tab)에게 특별한 감사를 표합니다. 이들이 없었다면 이번 릴리즈는 불가능했을 겁니다.

모든 커뮤니티 및 110명의 기여자 (opens in a new tab)(+ 45명의 문서 기여자 (opens in a new tab))분들, 그리고 의견을 주신 모든 분들께도 감사를 표합니다.