React Query의 용도는 주로 서버 상태 관리(Server State Management)를 효율적으로 처리하는 것입니다. 서버 상태는 클라이언트 애플리케이션이 서버에서 데이터를 가져오고, 이를 사용하며, 서버와 동기화하는 데 사용되는 데이터를 말합니다. React Query는 이를 간단하고 효율적으로 처리하는 도구입니다.
React Query의 주요 용도
1. 서버 데이터 패칭(Fetching)
- REST API, GraphQL 등에서 데이터를 가져오는 작업을 간소화.
- 데이터를 가져오는 동안의 로딩 상태, 성공, 에러 처리를 자동으로 관리.
예제:
import { useQuery } from '@tanstack/react-query';
const fetchData = async () => {
const res = await fetch('/api/data');
return res.json();
};
const Component = () => {
const { data, isLoading, error } = useQuery(['key'], fetchData);
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return <p>Data: {data}</p>;
};2. 데이터 캐싱(Caching)
- 서버에서 가져온 데이터를 캐싱하여 동일한 요청에 대해 중복 호출을 방지.
- 캐싱된 데이터를 활용하면 네트워크 요청 횟수를 줄이고 애플리케이션의 성능을 개선.
특징:
- 캐시된 데이터는 지정된 유효 시간(staleTime) 동안 재사용.
- 배경 새로고침을 통해 데이터가 오래된 경우 최신화.
3. 데이터 동기화(Synchronization)
- 클라이언트 상태와 서버 데이터를 자동으로 동기화.
- 사용자가 애플리케이션을 사용하는 동안 서버 데이터가 최신 상태인지 확인.
- 예를 들어, 배경 새로고침이나 특정 이벤트 후 데이터 동기화.
4. 오프라인 모드 지원
- 네트워크 연결이 끊긴 상태에서도 데이터를 로컬 캐시에서 읽어오고, 연결이 복구되면 자동으로 동기화.
5. 자동 상태 관리
- 로딩 상태, 에러 상태, 데이터 상태를 자동으로 관리.
- 별도로 상태 관리 코드를 작성하지 않아도 되므로 개발 생산성이 높아짐.
6. 데이터 변경(Mutations)
- 서버 데이터를 변경(예: POST, PUT, DELETE)하는 작업을 처리.
- 변경 이후 데이터를 자동으로 다시 가져오거나 캐시를 무효화하여 최신 상태를 유지.
예제:
import { useMutation, useQueryClient } from '@tanstack/react-query';
const postData = async (newData) => {
const res = await fetch('/api/data', {
method: 'POST',
body: JSON.stringify(newData),
headers: { 'Content-Type': 'application/json' },
});
return res.json();
};
const Component = () => {
const queryClient = useQueryClient();
const mutation = useMutation(postData, {
onSuccess: () => {
queryClient.invalidateQueries(['key']); // 데이터 다시 가져오기
},
});
const handleSubmit = () => {
mutation.mutate({ name: 'New Data' });
};
return <button onClick={handleSubmit}>Submit</button>;
};7. 배경 새로고침(Background Refetch)
- 데이터가 유효하지 않은 경우 배경에서 자동으로 데이터를 새로 가져옴.
- 예를 들어, 사용자가 브라우저 탭을 다시 활성화할 때 데이터를 최신 상태로 유지.
8. 페이지네이션 및 무한 스크롤 지원
- 데이터가 많은 경우, 페이지 단위로 데이터를 가져오거나 무한 스크롤을 구현.
예제:
import { useInfiniteQuery } from '@tanstack/react-query';
const fetchItems = async ({ pageParam = 1 }) => {
const res = await fetch(`/api/items?page=${pageParam}`);
return res.json();
};
const Component = () => {
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
['items'],
fetchItems,
{
getNextPageParam: (lastPage) => lastPage.nextPage || undefined,
}
);
return (
<div>
{data.pages.map((page, i) => (
<div key={i}>
{page.items.map((item) => (
<p key={item.id}>{item.name}</p>
))}
</div>
))}
{hasNextPage && <button onClick={() => fetchNextPage()}>Load More</button>}
</div>
);
};React Query의 장점
-
생산성 향상:
- 상태 관리, 로딩 처리, 에러 처리 코드를 별도로 작성하지 않아도 됨.
-
재현 가능한 데이터 흐름:
- 캐싱 및 배경 새로고침을 통해 데이터가 항상 최신 상태를 유지.
-
성능 최적화:
- 캐싱 및 데이터 재사용을 통해 네트워크 요청을 최소화.
- 필요할 때만 데이터를 다시 가져옴.
-
타입스크립트 지원:
- 강력한 타입 지원으로 타입 안정성이 뛰어남.
React Query를 사용하는 이유
- 서버와의 데이터 동기화가 애플리케이션의 주요 기능인 경우.
- REST API, GraphQL과 같은 데이터를 주로 사용하는 애플리케이션에서 데이터 상태 관리를 간소화하고 싶을 때.
- 캐싱 및 데이터 최신화가 중요한 프로젝트에서 성능 최적화를 원할 때.
- 클라이언트 상태 관리 도구(Redux 등)를 사용하지 않고 서버 상태만 관리하고 싶을 때.
React Query는 데이터 중심 애플리케이션에서 불필요한 상태 관리 코드를 제거하고, 간결하고 효율적인 데이터 관리를 가능하게 합니다.
이미 Recoil 같은 전역 상태관리를 사용하고 있으면 React-Query 같은 경우는 서버 상태 관리 용도로 사용하면 된다.
꾸준함이란 ... ?