React Query

서버 상태를 fetching, caching, synchronizing, updating 하는 것을 도와주는 라이브러리

리액트 쿼리를 사용한 이유 ?

1. 전역 상태 관리 없이 전역적으로 데이터를 사용할 수 있습니다.
2. 캐싱, 동기화, 업데이트, stale/fresh data 관리를 자동화할 수 있습니다.

---

React Query Vs Recoil+Axios

• 서버 상태 관리: React Query는 서버의 상태를 불러오고, 캐싱 및 동기화, 업데이트하는 작업을 자동화합니다.
• 기존 접근 방식 : 전역 상태 관리 라이브러리 (Recoil) + API 호출 (Axios)를 조합하여 서버 데이터를 관리했습니다.

핵심 개념

• Fetching (패칭): 서버에서 데이터를 가져옵니다.
• Caching (캐싱): 가져온 데이터를 저장합니다.
• Updating (업데이트): 서버의 데이터를 변경하고, 변경 사항을 클라이언트에 반영합니다.
• Synchronizing (동기화): 클라이언트의 데이터를 서버 데이터의 최신 상태로 유지합니다.

Stale Data / Fresh Data 관리

• Stale Data: 일정 시간이 지나 업데이트가 필요한 데이터입니다.
  • StaleTime 동안 Fresh Data로 유지됩니다.
• Fresh Data
  • Fresh Data 상태의 데이터는 재요청되지 않고 캐시된 데이터가 사용됩니다.

React Query의 사용 방법

조회

• useQuery : 서버에서 데이터를 읽어옵니다.
  • 반환값: data, error, isLoading, isFetching
  • QueryKey: 쿼리를 고유하게 식별하는 역할

const { data, isLoading, error } = useQuery('queryKey', fetchDataFunction);

• invalidateQueries: 해당 쿼리 키의 캐시를 무효화하고 데이터를 다시 가져옵니다

queryClient.invalidateQueries('dataQuery');

데이터 업데이트

• useMutation: 데이터 생성, 업데이트, 삭제 등 서버의 데이터를 변경합니다.

const mutation = useMutation(newData => axios.post('/data', newData), {
  onSuccess: () => {
    queryClient.invalidateQueries('dataQuery');
  },
});

데이터 직접 수정

• setQueryData: 쿼리 데이터를 직접 수정하거나 업데이트합니다.

queryClient.setQueryData('dataQuery', updatedData);

쿼리 옵션

• enabled: 쿼리 실행을 조건부로 관리합니다.
  • default : 0
• retry: 실패한 쿼리를 재시도합니다.
  • default : 3
• cacheTime: 데이터가 inactive 상태이고 cacheTime에 도달하면 gc에 의해 삭제됩니다.
  • default : 5분

쿼리 데이터 흐름