[발표] 22.11.17 데이터 패칭 라이브러리 조사

매일 노션에 하루 기록지(일기)를 작성중이지만 단순히 발표했다는 기록만 남기게 되니
내가 언제 어떠한 발표와 공유자리를 가졌는지 기억하기 어려웠다.

그래서 발표와 같은 기록들은 velog에 하나하나 남기기로 했다.
(11월에 발표했던 내용이지만 지금에서야 기록...)

이미 파워포인트 형식으로 내용들을 정리해 놓아서 다시 velog로 내용을 옮기기 애매한데 옮길 수 있는 내용은 옮겨본다.

(파워포인트 내용은 구글드라이브 링크를 남깁니다.)
https://docs.google.com/presentation/d/1pqRkaj91mBdUDlQUsf7NsQm0bxDmHFNT5qLWLoooQcM/edit?usp=share_link

쇼핑몰 페이지 작업을 위해서 조사...

회사에서 11월 중순쯤 관리자 페이지 프로젝트가 마무리되어가고 쇼핑몰 페이지 작업을 들어가는 단계였다.

당시 나는 입사한지 얼마되지 않았기 때문에 관리자 페이지 작업에 참여하지 않는 상황이었다.
때문에 대표님께서 곧 시작하는 쇼핑몰 페이지에서 데이터패칭 라이브러리 사용을 고려하고 있으므로 내용을 조사하여 발표해주면 좋겠다고 하셨다.

기존 Redux를 사용 예시

기존 Redux와 같은 상태관리 라이브러리를 사용할 때의 예시는 다음과 같다.

1. 데이터를 요청해서 받는다.
2. 요청해서 fetching한 데이터를 store에 저장한다.
3. Redux store 등에 저장한 데이터를 -> 필요한 컴포넌트에 가져다 쓴다.
4. 하지만 백엔드 서버에서의 데이터는 지속적으로 수정된다.(post, patch등…)
5. 클라이언트에서는 일관성이 깨지는 것을 막기 위해 새로 요청을 해서 데이터 최신화를 해야 한다.

위와 같이 Redux를 사용하는 경우, 데이터를 비동기적으로 fetching 해오기 위해 redux-saga와 같은 미들웨어를 사용하는 경우가 많다고 한다.(난 아직 사용해보지 못하였다...)
데이터 일관성(Frontend, Backend 데이터 상태 동기화)을 위해서 1) 데이터 패칭과 관련 상태와 액션들을 모두 일일이 정의해주어야 하고 2) refetching 로직을 추가해주어야 하기 때문에 코드가 비대해지고 복잡해진다고 한다.

이러한 불편함을 해결하기 위해

데이터 패칭 라이브러리가 등장했다고 한다.
데이터 패칭 라이브러리에서는 위와 같이 Redux를 사용할 때와 같이 상태와 액션들을 모두 정의하지 않아도 데이터 패칭과 관련하여 다양한 옵션과 기능들을 제공해준다.

React-Query, SWR, RTK-query, Apollo 등 여러 데이터 패칭 라이브러리들이 존재한다.
데이터 패칭 라이브러리의 대표적인 장점은 다음과 같다.

데이터 패칭 라이브러리의 장점

1. 데이터 일관성의 문제를 해결해 준다!

fetching 해온 데이터를 캐싱하여 관리할 수 있다.
또한, 오래된 데이터는 background에서 자동으로 업데이트할 수 있다.

2. 비동기와 관련된 부가 기능을 제공한다!

비동기 요청에 따른 status(로딩중, 에러여부, 패칭여부 등등) 처리가 가능하다.
또한, 데이터 패칭 실패에 따른 retry 처리도 가능하다.

이처럼 데이터 패칭 라이브러리는 기존보다 더 쉽고 편리하게 기능들을 제공한다는 점에서 매우 혁신적이라는 생각이 들었다.(Redux-saga 등을 사용해 볼 기회가 있다면 더욱 장점이 와닿을 것 같다...)

나는 이 라이브러리들 중 SWR과 React-Query를 간단히 조사했다.

SWR

참조 사이트 : https://swr.vercel.app/ko/docs/getting-started

npm / yarn 으로 설치

npm install swr

yarn add swr

활용 예시

useSWR

const { data, error } = useSWR(key, fetcher, option)

• 첫번째 인자는 key
  요청을 위한 고유한 키 문자열(또는 함수 / 배열 / null)

• 두번째 인자는 fetcher 함수
  첫번째 인자의 url(=key)를 받아서 사용하고 데이터를 리턴한다.
  ex) const fetcher = url => axios.get(url).then(res => res.data)

• 세번째 인자는 옵션 설정
  옵션 중 몇가지 예시는 아래와 같다

    revalidateOnMount : 컴포넌트가 마운트되었을 때 자동 갱신 활성화 또는 비활성화
    revalidateOnFocus : 창이 포커싱되었을 때 자동 갱신
    refreshInterval : 폴링 인터벌(밀리초)
    onSuccess(data, key, config): 요청이 성공적으로 종료되었을 경우의 콜백 함수
	onError(err, key, config): 요청이 에러를 반환했을 경우의 콜백 함수 

SWRConfig (전역 fetcher 설정)

모든 SWR hook에 대한 전역 설정할 수 있는 provider

<SWRConfig 
	value={{
	refreshInterval: 3000,
	fetcher: (resource, init) => fetch(resource, init).then(res => res.json())
}}>
  <Dashboard />
</SWRConfig>

React-Query

참조 사이트 : https://react-query-v3.tanstack.com/installation

npm / yarn 으로 설치

npm i react-query

yarn add react-query

활용 예시

useQuery

const { isLoading, isError, data, error } = useQuery([QueryKey], QueryFunction)

• 첫번째 인자 : QueryKey 데이터 캐싱 처리 기준이 되는 식별자로 형태는 문자열 또는 배열(중첩 리소스)
• 두번째 인자 : QueryFunction 비동기 함수(api호출 함수)
• 세번째 인자 : 옵션
  옵션 중 몇가지 예시는 아래와 같다.

 	onSuccess(data) => {}: 요청이 성공적으로 종료되었을 경우 호추
	onError(err) => {} : 요청이 에러를 반환했을 경우 호출
    refetchOnMount : mount 시 refetch
    refetchOnWindowFocus : 윈도우 포커스시 refetch
    refetchInterval: 일정시간 마다 refetch (staleTime과 상관없이 실행)

useMutation

useMutation([MutationKey], (newTodo) => {
    return axios.post("/todos", newTodo)
}

• useQuery와 달리 데이터를 수정하는 경우 사용
  일반적으로 데이터를 생성/업데이트/삭제 등의 side effect를 수행하는 데 사용
• 첫번째 인자 : MutationKey 데이터 캐싱 처리 기준 (queryKey와 마찬가지로 MutationKey를 기준으로 뮤테이션 결과가 캐싱된다.)
• 두번째 인자 : MutationFunction 비동기 함수(api호출 함수)

queryClient의 defaultOptions (전역 옵션 설정)

모든 query와 mutation의 default를 정의할 수 있다.

  const queryClient = new QueryClient({
    defaultOptions: {
      // (전역적으로) 모든 useQuery 의 query option을 설정할 수 있다.
      queries: {
        refetchOnMount: false,
      },
    },
  });

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );

발표는...

이와 같이 간단하게 데이터 패칭 라이브러리의 장점, react-query와 SWR의 간단한 사용법 등의 내용으로 진행하였고
데이터 패칭 라이브러리 비교 표를 보면서 마무리했다.

데이터 패칭 라이브러리 비교 표

아무래도 react-query docs에서 작성된 표이다 보니, react-query에 굉장히 유리한 내용이 작성되어 있다.

원본 사이트 : https://tanstack.com/query/v4/docs/comparison?from=reactQueryV3&original=https://react-query-v3.tanstack.com/comparison

뒤늦게 작성하고 보니

무려 5개월 전 발표 내용을 올리려하니 라이브러리들도 그새 많이 라이브러리들이 업데이트가 되어 바뀐 내용이 많은 것 같다.
SWR은 11월 만 해도 isLoading state가 없었는데 작년 12월 2.0.0 업데이트에 추가가 된 걸 확인했다. (react-query 라이브러리를 사용하기로 결정한 이유 중 하나가 SWR에서 isLoading state를 구현하기 위해 귀찮게 코드를 작성해야 하는 내용도 있었는데...)
이토록 업데이트가 잦으니 라이브러리 사용시 항상 docs를 참조하고 확인해야 하는 것 같다.

참조 사이트

Data Fetching Library 어떻게 사용해야할까? https://kooku0.github.io/blog/data-fetching-library-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C/
전역 상태 관리에 대한 단상 (stale-while-revalidate)
https://jbee.io/react/thinking-about-global-state/
Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router
https://tanstack.com/query/v4/docs/comparison?from=reactQueryV3&original=https://react-query-v3.tanstack.com/comparison
React Query로 서버 상태 관리하기
https://blog.rhostem.com/posts/2021-02-01T00:00:00.000Z
React Query 공식 docs
https://react-query-v3.tanstack.com/overview
SWR 공식 사이트
https://swr.vercel.app/ko