[JS/React-Query] 0. QueryClient

관통 프로젝트를 진행할 때 사용했던 Vue.js는 내가 처음 사용해 본 프론트엔드 프레임워크였기 때문에 비교 대상이 없었다.

(리액트는 라이브러리임)

하지만 강사님의 말씀과 구글링을 통해 대부분의 기업이 React를 채택하고 있는 것을 확인, 그래서 방학 때 리액트 공부를 해보기로

 

리액트를 사용하며 처음 든 생각은 '뭐부터 해야하지?'일 정도로, 높은 자유도를 가졌다고 느꼈다.

<template>, <script>, <style>로 정해진 양식이 있는 vue와 달리, jsx파일 내에는 html과 javaScript의 혼용이 가능했음

 

아무튼 이런 리액트의 장점을 극대화 하는 React-Query에 대해 자세히 알아보자

왜 React-Query를 사용해야 하는가

1. 복잡한 캐싱을 대신해줌

• API 요청 결과를 자동으로 캐싱하여 불필요한 중복 요청 방지
• 같은 API 요청이 발생하면 캐싱된 데이터를 먼저 반환 후, 자동으로 최신화
• useState로 상태 관리할 필요 없이, useQuery가 자동으로 처리

2. 자동 데이터 동기화 (리페칭)

• 데이터가 변경되면 자동으로 최신 데이터를 가져옴
• 사용자가 화면을 다시 방문하면 자동 리패칭 (새로고침 필요 없음)
• refetchOnWindowFocus, refetchInterval, staleTime 등의 옵션으로 세부 조정 가능

3. **낙관적 업데이트**

• 서버 응답을 기다리지 않고 즉시 UI를 업데이트
• 요청 실패 시, 자동으로 롤백 (이전 상태로 되돌리기)

이번 공통프로젝트는 웹 앱 형식이기에 빠른 반응성이 사용자 경험에 있어서 가장 중요하다고 판단했다.

그러기 위해서는 서버의 응답을 기다리지 않고 변경사항을 반영하는 낙관적 업데이트가 필요하다고 생각했고,

편한 낙관적 업데이트 구현을 위해 리액트 쿼리를 사용했다.

물론, 리액트 쿼리의 다른 기능들도 필요함

 

 

 

0. 기본 설정

0.1 설치

npm i tanstack/react-query
npm i tanstack/react-query-devtools

0.2 QueryClient

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// QueryClient 생성
const queryClient = new QueryClient();

// main.jsx에서 app에 QueryClientProvider를 감싸서 모든 컴포넌트에서 사용하도록 설정
createRoot(document.getElementById('root')).render(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
);

0.2.1 QueryClient의 속성

1. staleTime : 데이터가 신선하다고 간주되는 시간
2. cacheTime : 캐시 데이터를 유지하는 시간
3. refetchOnMount : 컴포넌트 마운트 시 데이터를 다시 가져올지 여부
4. refetchOnWindowFocus : 브라우저가 활성화 될 때 데이터를 다시 가져올지 여부
5. retry : 실패 시 재시도 횟수
6. retryDelay : 재시도 간격(ms)
7. enabled : 기본적으로 쿼리를 활성화 할 지 여부