React Query ( feat: usequery,caching, stale )

성찬홍·2023년 10월 14일

React next.js

1. React Query란?

현업에 들어간 지 이제 1개월 차가 되었고, 열심히 적응해 나갔습니다. 이제는 하나씩 쌓아 나가야 할 기술 중 하나인 React Query에 대해 정리해 보려고 합니다.

: React Query는 데이터 Fetching, 캐싱, 동기화, 서버 측 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리입니다.

장점

React 애플리케이션 내에서 데이터 패칭, 캐싱, 동기화 그리고 서버 상태의 업데이트를 좀 더 용이하게 만들어 줍니다.
기존에는 직접 만들어서 사용했던 기능들을 별도의 옵션으로 지원하여, 복잡하고 이해하기 어려운 수많은 코드를 React Query 로직을 통해 짧은 코드로 대체할 수 있게 되었습니다.
캐싱을 효율적으로 관리해 줍니다.
페이징 처리, 지연 로딩 데이터와 같은 성능을 최적화해 줍니다.

2. useQuery, useMutation

1. useQuery는 React Query를 이용해 서버로부터 데이터를 조회해 올 때 사용한다.

2. useMutation은 데이터 변경 작업을 할 때 사용된다(insert, update, delete).

2. useQuery

사용 예시 및 형태

(1) queryKey

: useQuery 사용 시 해당 API의 데이터를 캐싱하는데, key 값을 가지고 캐싱하게 된다. 그래서 다시 해당 페이지로 돌아올 때 key 값을 통해 확인하여 데이터가 존재하면 해당 값을 가져오게 되어 불필요한 API 호출을 하지 않아도 된다.

(2) queryFn

: Query Function으로 Promise 처리가 이루어지는 함수라고 할 수 있다.
(API 호출 함수를 입력하는 곳이라고 생각하면 될 것 같다.)

(3) onSuccess / onError / onSettled

: useQuery 사용 시 세 번째 인자인 객체는 내부에서 비동기 데이터 처리 결과에 대해 특정 처리를 할 수 있는 콜백 함수를 담는 옵션을 제공한다.

onSuccess?: (data: TData) => void

onError?: (err: TError) => void

onSettled?: (data: TData | undefined, error: TError | null) => void

option #1 refetch

: useQuery 호출 시 주어지는 것 중 하나로, 캐싱 결과를 조회하지 않고 완전히 무시한 채로 AJAX 요청을 보내는 메서드이다.

option #2 enabled

: enabled: false는 useQuery의 기능을 사용하지 않겠다고 설정하는 것과 같다.

useQuery(['todos', todoId], async () => {
  const data = await fetchTodoById(todoId);
  return data;
});

3. 캐싱과 staleTime

(1) staleTime

: stale은 최신화가 필요한 데이터를 의미합니다.
즉, 캐싱되어 있더라도 stale 상태의 값이면 refetch하게 됩니다.
옵션의 기본값이 0이면 바로 stale한 데이터로 판단하게 되어 있습니다.

& stale한 상태에서 refetch가 이루어지는 경우

새로운 Query 인스턴스가 마운트될 때(useQuery가 처음 호출될 때)
브라우저 화면을 이탈했다가 다시 포커스할 때
네트워크가 다시 연결될 때
특별히 설정한 refetch interval에 의해

(2) 캐싱 시간

: 캐싱된 값들이 언제까지 유지될지를 말해 주는 옵션입니다.
캐시 구조에 저장된 데이터가 존재하게 되는데, 이때 캐싱된 쿼리의 결과값은 계속 유지되는 것이 아니라 시간이 지나면 메모리에서 사라지게 됩니다.
기본 설정된 캐싱 시간은 5분으로 설정되어 있습니다.

(3) queryClient

: 위의 캐싱과 관련된 내용은 React Query에서 제공해 주는 메서드인 useQueryClient를 통해 조회할 수 있습니다.

queriesMap 안에 존재하는 것을 확인할 수 있습니다.

4. 내 프로젝트 코드로 테스트해 보기

: 내가 만든 프로젝트의 API로 테스트해 보았다. isLoading을 이용하여 데이터 Fetch 여부를 확인할 수 있었고, 캐싱된 데이터를 불러오기 때문에 로드하는 속도가 눈에 띄게 빨라진 것을 확인해 볼 수 있었습니다.

tip) isLoading

: 최초 useQuery 실행 시에는 true인 상태였다가 데이터 Fetch 이후 false로 전환된다.
그리고 다른 페이지로 이동한 후 다시 돌아왔을 때 key 값으로 캐싱 데이터를 확인하고, 캐싱되어 있다면 바로 false를 반환한다.

const { data, isLoading, status, isFetching } = useQuery<slideInfo[]>({
  queryKey: ["test"],
  queryFn: () =>
    axiosInstance.get("/home/club/top/list").then((res) => {
      return res.data;
    }),
});

console.log(isLoading); // 최초 실행 시 true, 캐싱 이후 false

느낀 점

현 회사에서 React Query를 사용 중이기에 나도 React Query를 이용해 코딩했습니다.
그러나 어떻게 캐싱되고, 어느 시점에 refetch를 사용해야 하는지 등의 개념을 제대로 숙지하지 못하고 사용했기 때문에 다른 코드를 보고 느낌에 의존하여 기능을 만들었습니다.
지금 이해하고 보니 내가 작성한 코드 중 수정해야 할 부분들이 떠올라서 오늘 배운 개념을 바탕으로 리팩토링을 조금 해야 할 것 같다는 것을 알게 되었습니다.
일을 시작한 지 이제 한 달 차가 되어, 채워 나가야 할 부분들을 차근차근 공부해 나가야 할 것 같습니다.
React Query는 제 프로젝트에서 무한 스크롤을 구현할 때 사용했었습니다. 그러나 그 당시에는 무한 스크롤에만 집중하여 사용했기 때문에 제대로 이해하고 사용하지는 않고 구현에만 신경을 썼습니다. 이제는 어떤 라이브러리를 사용하더라도 어느 정도 이해하고, 사용 이유를 충분히 파악한 뒤 사용해야겠습니다.
그리고 내 프로젝트의 문제 중 하나였던 용량이 큰 이미지 로드로 인한 렌더링 속도 문제가 있었는데, React Query를 이용하면 상당히 개선할 수 있을 것 같아서 적용해 봐야겠다는 생각이 들었습니다.