[React] React-Query

React-Query란?

• React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리.
• React Query는 우리에게 친숙한 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안함.

등장 이유?

• 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하게 되었다.

Redux와 React-Query

Redux에서 React-Query로의 전환?

• 클라이언트 데이터보다 서버 데이터에 의존적인 성향의 서비스인 경우.
• 서버의 데이터와 클라이언트의 데이터 구분의 모호함도 존재.
• 서버의 응답을 Store에 저장할 필요가 없는 상황에서도 구조화를 위해 Action Types, Actions, Reducer를 만들고, Action을 호출하는 등의 불필요한 상황, 캐싱 처리 및 관리 문제 등이 존재.

💡 클라이언트 데이터란?

클라이언트 데이터는 일반적으로 사용자 또는 클라이언트 프로그램(예: 웹 브라우저, 모바일 앱)가 생성, 유지하고 전송하는 데이터를 의미한다.

❓예시

• 검색어나 필터 설정과 같은 정보
• 선택한 상품 및 주문 내역
• 모달 관련 데이터, 페이지 관련 데이터

💡 서버 데이터란?

서버 데이터는 서버 컴퓨터에서 생성, 유지하고 저장되는 데이터를 의미한다. 서버는 클라이언트의 요청을 처리하고 응답을 생성하는 역할을 한다.

❓예시

• 웹 서버는 웹 페이지의 내용, 이미지, 동영상 파일 및 데이터베이스 정보와 같은 여러 종류의 데이터
• 모든 판매 상품 정보, 재고 수량, 가격, 제품 설명 등
• 주문 내역, 결제 정보, 주문 처리 상태, 배송 추적 정보
• 비동기 API 호출을 통해 불러오는 데이터

Redux와 비교한 React-Query의 장점

1. 프로젝트 구조가 기존보다 단순해짐.
2. 캐싱 처리가 더 간단해짐.
3. 직접 만들어서 사용했던 기타 기능들을 옵션으로 지원.
4. Redux와 Redux-Saga를 사용할 때는 Success, Failure 값을 useEffect의 deps로 전달해서 처리해야 하는 과정이 필요했었는데, 이 과정을 onSuccess와 onError로 간단하게 처리 가능.

React-Query 특징

1. 캐싱(Caching)

• 캐싱 : 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것을 말한다.
• React-Query는 캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 이는 불필요한 API 콜을 줄여 서버에 대한 부하를 줄이는 좋은 결과를 가져온다.

어떻게 최신의 데이터인지 판별하는가?

• 만일 서버 데이터를 불러와 캐싱한 후, 실제 서버 데이터를 확인했을 때 서버 상에서 데이터의 상태가 변경되어있다면, 사용자는 실제 데이터가 아닌 변경 전의 데이터를 바라볼 수밖에 없게 된다. 이는 사용자에게 잘못된 정보를 보여주는 에러를 낳는다.

=> 언제 데이터를 갱신해야하는지에 대한 문제로 이어짐.

1. 화면을 보고 있을 때
2. 페이지의 전환이 일어났을 때
3. 페이지 전환 없이 이벤트가 발생해 데이터를 요청할 때

이를 위해 React-Query에서는 기본적인 아래의 옵션들을 제공한다.

refetchOnWindowFocus, //default: true
refetchOnMount, //default: true
refetchOnReconnect, //default: true
staleTime, //default: 0
cacheTime, //default: 5분 (60 * 5 * 1000)

💡 staleTime, cacheTime에 대한 추가 공부 필요

❗위의 옵션들을 통해 우리는 React-Query가 어떤 시점에 데이터를 Refetching하는지 알 수 있다.

1. 브라우저에 포커스가 들어온 경우(refetchOnWindowFocus)
2. 새로운 컴포넌트 마운트가 발생한 경우(refetchOnMount)
3. 네트워크 재연결이 발생한 경우(refetchOnReconnect)

2. 클라이언트 데이터와 서버 데이터 간의 분리

const { data, isLoading } = useQueries(
	['unique-key'],
	() => {
		return api({
			url: URL,
			method: 'GET',
		});
	},
	{
		onSuccess: (data) => {
			// data로 이것저것 하는 로직
		}
	},
	{
		onError: (error) => {
			// error로 이것저것 하는 로직
		}
	}
)

• 예시에서는 컴포넌트 내부에서 위와 같은 로직을 통해 Server 데이터를 가져오고 있는데, 이때 onSuccess와 onError 함수를 통해 fetch 성공과 실패에 대한 분기를 아주 간단하게 구현할 수 있다. 이는 Server 데이터를 불러오는 과정에서 구현해야할 추가적인 설정들을 진행할 필요가 없다는 이야기이다.

=> 즉, Client 데이터는 상태 관리 라이브러리가 관리하고, Server 데이터는 React-Query가 관리하는 구조라고 생각하면 된다. 이를 통해 우리는 Client 데이터와 Server 데이터를 온전하게 분리할 수 있다.

3. 기능

- useQuery

useQuery 훅은 서버로부터 데이터를 가져오는 데 사용된다. 주로 데이터를 읽는 작업에 사용되며, 해당 데이터를 캐시하고 실시간 업데이트를 관리.
이 훅을 사용하면 쿼리 함수와 옵션을 제공하여 서버로 데이터 요청을 보내고 데이터를 가져올 수 있다.

const { data, error, isLoading } = useQuery('userData', fetchUserData);

- useQueries

useQueries 훅은 여러 개의 쿼리를 동시에 처리할 때 사용. 여러 개의 서버 데이터 요청을 병렬로 수행하고 결과를 받아올 수 있다.
각 쿼리는 개별적으로 정의되고, 각각의 결과를 확인할 수 있다.

const queries = [query1, query2, query3];
const results = useQueries(queries);

- useMutation

useMutation 훅은 서버에 데이터를 업데이트, 생성, 삭제하는 데 사용. 주로 데이터를 쓰는 작업에 사용되며, 성공 또는 실패와 같은 결과를 처리할 수 있다.
이 훅을 사용하면 뮤테이션 함수와 옵션을 제공하여 서버에 데이터 변경 요청을 보내고 결과를 처리할 수 있다.

const mutation = useMutation(updateUserData);

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유
[React-Query] React-Query 개념잡기