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는 Raect Query를 이용해 서버로부터 데이터를 조회해올 떄 사용한다.

2. useMutaion 는 데이터 변경 작업을 할 떄 사용된다.( insert, update , delete)

2. useQuery

사용 예시 및 형태

(1) querykey

: useQeury 사용시 해당 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는 useQeury의 기능을 사용하지 않겠다고 말해주는 것과 같다.

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

3. 캐싱과 staleTime

(1) staleTime

: stale은 최신화가 필요한 데이터를 의미합니다.
즉, 신선하지 않은 데이터로 캐싱되어 있더라도 stale한 값이면 refetch하게 됩니다.
option 중에 defualt가 0이면 stale한 데이터로 판단하게 되어 있습니다.

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

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

(2) 캐싱 타임

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

(3) queryClient

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

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

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

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

tip) isLoading
: 최초 useQeury 실행시에 , true인 상태였다가 data 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를 이용하면 상당히 개선시킬 수 있을 것 같아서 적용해 봐야겠다는 생각이 들었습니다.