SWR 를 통한 데이터 fetching

기존 방식 특징 사용법 기본 구조 useSWR options useSWRMutation mutate options SWRConfig useSWRConfig 활용 검색 기능 Pre-rendering React Query 와의 차이점

SWR 은 Next.js 를 개발한 vercel 에서 개발한 React 환경에서 데이터를 가져오기 위해 사용되는 React Hooks 라이브러리이다.

데이터를 가져오는 경우, 먼저 캐시 데이터를 먼저 반환하고 fetch 를 통해 검증해서 최신 데이터를 보여주는 과정으로 동작한다.

기존 방식

기존의 fetching 과정은 이랬다.

useEffect 내부에서 fetching 진행

1번에서 응답받은 데이터를 useState 나 전역 상태관리 라이브러리를 통해 적용

이런 방식은 기능상으로는 큰 문제가 없는 것 같지만, 서버 데이터를 클라이언트에서 사용하기 위해 2개의 과정 이상의 동작이 필요하다 보니 개발 시 번거로움이 생기고, 하나의 컴포넌트 내부에 fetching 관련 코드와 UI 관련 JSX 코드가 같이 있다 보니 코드가 복잡해진다는 문제점이 발생한다.

이 문제를 SWR 을 통해 해결할 수 있다.

특징

가볍고 초기 설정이 없다.

타입스크립트를 지원한다.

SSR, SSG, ISR 모두 지원한다.

React Native 에서 사용 가능하다.

useSWR 의 key 를 동일하게 하여 데이터를 전역적으로 상태를 관리할 수 있다.

사용법

기본 구조

해당 코드는 useSWR 의 인자에 api endpoint 와 fetching 을 담당하는 fetcher 함수를 적용하여 return 값으로 data, error, isLoading 을 전달 받아 조건부 렌더링을 처리해주는 기본적인 구조이다.

실행 과정

fetcher 의 인자값으로 endpoint 형식의 key 값이 전달되어 key 값을 통해 데이터 요청

fetcher 에서 서버에 데이터 요청 후 응답 데이터 return

3번의 응답 데이터가 data 에 적용

useSWR

data: fetcher 에서 반환된 데이터

error: fetcher 에서 반환된 에러

isLoading: 데이터 로딩 여부

isValidating: 데이터를 요청(검증) 여부

mutate: 캐싱 데이터 업데이트 함수

options

fallbackData: 데이터 기본값

revalidateOnMount: 마운트가 되는 경우 재검증(요청)

revalidateOnFocus: 브라우저 창이 포커스되면 재검증

refreshInterval: 데이터 폴링 (ms)

refreshWhenHidden: 브라우저 창이 보이지 않아도 폴링 (refreshInterval 이 활성화 되어있는 경우 동작)

onSuccess: 요청이 성공된 경우의 콜백 함수

onError: 요청이 실패한 경우의 콜백 함수

onErrorRetry: 에러 처리 핸들러

useSWRMutation

data: fetcher 에서 반환된 데이터

error: fetcher 에서 반환된 에러

trigger: mutation 실행 함수

reset: data, error, isMutating 을 초괴화

isMutating: 데이터 mutate(요청) 여부

mutate options

useSWR 의 mutate 와 useSWRMutation 의 옵션은 대부분 같은 옵션을 적용할 수 있다.

optimisticData: 데이터를 요청하기 전에 새로운 결과값을 UI 에 적용

populateCache: 응답받은 새로운 데이터를 캐시 데이터에 적용

만약 유저 리스트 api에 POST 요청을 하면 추가된 데이터가 포함된 배열을 응답받는 것이 아니라 추가한 객체를 응답으로 받는 경우, populateCache 를 통해 기존의 배열 데이터와 응답받은 객체를 병합하여 배열 형식으로 return 하여 캐시 데이터를 적용할 수 있다.

💡

useSWR 의 mutate 는 GET 우선적으로 실행한 뒤에 추가 동작을 진행하고, useSWRMutation 의 trigger 는 POST, DELETE 등의 수정 작업만 진행하는 경우 사용할 수 있다.

SWRConfig

SWRConfig 를 통해 Provider 형식으로 전역적인 옵션 설정이 가능하다.

useSWRConfig

useSWRConfig 를 통해 동일한 key 의 데이터를 재요청(검증) 할 수 있다.

활용

블로그를 개발할 때 2가지 기능을 구현하기 위해 SWR 를 활용한 적이 있다.

검색 기능

useSWR 의 캐시 기능을 통해 검색 결과를 더 빠르게 보여줄 수 있도록 하였고, isLoading 을 통해 검색하는 경우 사용자에게 로딩 인디케이터를 보여주도록 작업하였다.

Pre-rendering

우선 파일 구조를 설명해보자면 이런 구조로 되어있다.

페이지를 이동할 수 있는 네비게이션 컴포넌트를 가지고 있는 NotionPageList 컴포넌트를 총 3가지의 페이지에서 사용하는 상황이다.

먼저 각각의 페이지의 next.js data fetching 함수(getServerSideProps, getStaticProps) 에서 페이지 관련 데이터를 fetching 한 뒤, return 값의 props.fallback 객체에 swrKey: data 형식의 객체를 적용하여 return 해준다.

그 뒤에 pages/page 컴포넌트에서 props 로 fallback 을 전달받고, 그 값을 하위 컴포넌트에 전달하기 위해 JSX 영역을 SWRConfig 로 감싸주었다.

그리고 네비게이션 컴포넌트를 가지고 있는 NotionPageList 컴포넌트에 useSWR 을 적용해주고, data fetching 함수에서 return 한 fallback 객체의 swrKey 와 useSWR 의 key 값을 동일하게 적용해주면 data 값이 fallback.swrKey 의 데이터값으로 적용되는 것을 확인할 수 있다. data 를 JSX 에 적용하면 Pre-rendering 이 적용된다.

React Query 와의 차이점

ㅤ	React Query	SWR
Unpacked Size	1.33 MB	232 KB
제공 기능	많음	적음
Provider 적용 필수 여부	o	x
데이터 변형 여부	o (option - select)	x
DevTool 공식 여부	o	x