Data Fetching Library: React-Query, SWR

2020년부터 React Query와 SWR과 같이 data fetching 라이브러리들의 인기가 높아져가고 있다.

npm trends

Stats - 2023.01.31 기준

	Stars	Issues	Version	Updated	Created
react-query	32,659	50	3.39.3	6 days ago	8 years ago
swr	25,506	90	2.0.3	3 days ago	5 years ago

 

리액트에서 사용하는 상태(State)

• Local State: 리액트 컴포넌트 안에서만 사용되는 state
• Global State: Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 state
• Server State: 서버로부터 받아오는 state

리덕스로 상태 관리를 했기 때문에 Global State와 Server State를 전부 포함하는 방법으로 해야했는데,

react-query나 swr와 같은 data fetching 라이브러리를 사용함으로써 상태 관리 라이브러리에서 비동기 로직을 제거하여 사용할 수 있다.

 

Redux에서 Server State 처리

Redux는 어떠한 액션이 발생했을 때, 액션에 따라 데이터의 상태가 어떻게 변경되면 되는지를 리듀서에 정의한다.

동기 로직(Global State)에서는 Action과 Reducer를 직관적으로 작성할 수 있지만, 비동기 로직(Server State)에서는 미들웨어로 사용해야 한다. 리덕스 미들웨어는 redux-thunk와 redux-saga가 있고, 이들은 발생한 액션을 가로채서 다른 로직을 실행할 수 있도록 한다.

리덕스를 사용하게 되면 아래와 같은 많은 보일러플레이트가 요구된다.

• actions (fetch request, succeeded, failed)
• reducers (fetch request, succeeded, failed)
• one middleware (redux-thunk or redux-saga)

그리고 리덕스는 API 통신 및 비동기 상태 관리를 위한 라이브러리가 아니기 때문에 API 요청 수행을 위한 규격화된 방식이 부재했다.

마지막으로, 프로젝트의 규모가 커짐에 따라 코드의 복잡도까지 높아지기 때문에 유지보수에 대한 부담도 커지게 된다. 사용자 경험 향상을 위해서는 Data fetching 라이브러리가 필요하다.

Data fetching 라이브러리는 이와 같은 Redux 의 단점들을 해결해 줄 수 있다.

 

Data fetching Library

• 선언적으로 프로그래밍 할 수 있음(장황하지 않은 코드)
• 동일한 API 요청이 여러 번 호출될 경우 한 번만 실행
• 데이터가 지저분해진 경우 적절한 시점에 알아서 업데이트
• Global State와 Server State의 관심사를 분리

 

React Query

React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리ek.

React Query는 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안한다.

 

import { useQuery } from "react-query";

const useUser = id => {
  const result = useQuery(`/user/${id}`, fetcher, options);

  return result;
};

function Example() {
  const { isLoading, error, data } = useUser("123");

  if (isLoading) return "Loading...";
  if (error) return "An error has occurred: " + error.message;
  return <div>hello {data.name}!</div>;
}

• key(첫 번째 인자): unique한 key값으로, URL, string, array 등 가능
• fetcher(두 번째 인자): data를 fetch하여 넘어온 Promise를 리턴하는 함수(axios와 같은 라이브러리 사용 가능)
• options(세 번째 인자): react query의 옵션

 

SWR

SWR은 Next.js를 개발한 zeit 그룹에서 사용하는 라이브러리다.

SWR은 Stale-While-Revalidate의 줄임말로 백그라운드에서 캐시를 재검증(revalidate)하는 동안에 기존의 캐시 데이터(stale)를 사용하여 화면을 그려준다.

도중에 에러를 반환하더라도 캐시된 데이터를 활용할 수 있게 함으로써 불필요한 데이터 호출과 렌더링에 시간을 쓰지 않고 효율적으로 동작한다.

import useSWR from 'swr';

function App() {
  const { data, error } = useSWR("/api/user", fetcher, options);

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

• key(첫 번째 인자): unique한 key값으로, string 또는 function(string을 리턴)을 사용
• fetcher(두 번째 인자): data를 fetch하여 넘어온 Promise를 리턴하는 함수(axios와 같은 라이브러리 사용 가능)
• options(세 번째 인자): SWR hook의 옵션
• data : fetcher에 의해 반환된 data
• error: fetcher에서 던진 오류, 성공 시 undefined
• isValidating : 만약 요청이 있거나 로딩 중인 경우에 반환, boolean
• mutate(data? shouldRevalidate?) : 키에 해당하는 query를 refetch하도록 요청

 

---

참고

https://npmtrends.com/react-query-vs-swr

https://swr.vercel.app/ko

https://tanstack.com/query/v3/

https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/

https://velog.io/@0715yk/FE-Without-Redux-MiddleWares

https://velog.io/@soryeongk/SWRBasic

https://tech.kakaopay.com/post/react-query-1/