[React Query] React 상태관리와 React Query

gu·2023년 10월 11일

react-query

React Query

목록 보기

1/9

리액트 쿼리를 사용한 프로젝트를 만들기위해 리액트쿼리에대한 개념 정리 공간입니다.

🔍 알아보기

🖤 React의 상태관리 종류 4가지

1. Local state

useState
useReducer
❗ useState는 하나의 상태관리만 가능하고, useReducer는 여러개의 상태관리가 가능하다는 큰 차이점이 있다.
useContext(ContextAPI)

2. Global state

context는 provider로 주입된 하위의 모든 children component를 리렌더시키므로 Global state관리를 위해 사용하지 말아야 한다.
🚫Context API는 상태관리 솔루션이 아님
redux, Mobx, Zustand, Jotai vs Recoil

3. Server state

Server state는 데이터를 가져와서 페이지에 그리는 것뿐만아니라, 데이터 fetching동안 loading표시를 띄워야하고 서버 오류가 난 경우 그에 맞는 화면을 표시해야 한다.
SWR, React Query라이브러리 추천
- 데이터를 가져오고, 변경하고, 필요한 모든 상태를 지속적으로 추적하면서 캐싱해준다.
- global state관리로서도 사용할 수 있다.

4. URL state

NextJS, React Router 최신버전을 사용하고 있다면 기본적으로 관리되고 있다.

💻 React Query

🖤 Why Use?

react-query는 서버 데이터 관리를 위한 라이브러리로, API호출, 캐시 및 상태관리, 오류처리 등의 작업을 간단하게 처리할 수 있도록 도와준다.

서버데이터 관리 : 클라이언트에서는 서버로부터 데이터를 가져와 화면에 그려주고, 데이터를 생성, 삭제, 업데이트(CRUD)를 할수 있도록한다.
우리는 프로젝트를 진행할때 API를 호출하여 데이터를 화면에 그려줄 일이 많다. 매번 API호출을 통해 데이터를 가져올수는 있겟지만 서버에서 데이터를 가져오는 것은 요청-응답과정이 있어 느리고 서버트래픽을 늘려 과부하가 올수있다. 그렇기에 큰 프로젝트일수록 최적화를 잘 해줘야한다. 데이터를 캐시하고 요청을 최소화하고 재사용성을 늘려 처리시간을 줄이는 방법 등으로 최적화할 수 있다. 이러한 데이터 관리 작업을 react query로 간단하고 효율적으로 처리 할 수 있다. react query는 데이터를 캐시하고 자동으로 재시도하며, 데이터에 대한 오류 처리를 수행하고 데이터상태와 흐름을 추적할 수 있다. 또한 라이브러리 사용자의 입맛에 맞게 커스터마이징이 가능하다.

🖤 기능

API 호출
- useQuery, useMutation을 통해 CRUD처리를 할 수 있다.
캐시 및 상태관리
- 데이터에 대한 유효성 검사
  - 특정 state변경시 data refetch → dependency variable
  - 이벤트 발생 후에 refetch → Query Invalidation
  - 백그라운드에서 캐시된 데이터를 자동으로 업데이트
  - 데이터 흐름 추적 → debugger 제공
오류처리
- 서버에서 문제가 발생했을 경우 재시도, 실패처리 등
복잡한 여러 줄의 코드를 제거하고 몇 줄의 리액트 쿼리 로직으로 대체할 수 있도록 도와줌

🖤 3가지 핵심 개념

✔ Queries

고유키에 연결된 비동기 데이터에 대한 선언적 종속성이다. 서버에서 데이터를 가져오기 위해 promise기반 메서드(GET 및 POST포함)와 함께 쿼리를 사용할 수 있다. 즉, 데이터를 가져오는데 사용되는데, 일반적으로 REST API호출, GraphQL쿼리, Websocket등을 통해 데이터를 가져온다. 쿼리는 useQuery훅을 사용한다. useQuery는 비동기적으로 데이터를 가져오고, 데이터를 캐싱하여 이후의 요청에서 동일한 데이터를 다시 가져오지 않도록 한다.
쿼리 컴포넌트는 로딩 중, 에러발생 시에도 적절한 UI를 렌더링할 수 있도록 지원한다.

✔ Mutations

데이터를 수정하거나 삭제하는데 사용된다.
REST API호출, GraphQL Mutation등을 통해 데이터를 수정하고 useMutation훅을 사용한다.
- useMutation은 비동기적으로 데이터를 수정하고, 데이터를 업데이트하여 UI를 다시 렌더링한다.

✔ Query Invalidation (쿼리무효화)

캐시된 데이터를 무효화하는데 사용된다. 일반적으로 데이터가 수정되거나 삭제되었을 때, 해당 데이터를 다시 가져와서 캐시를 업데이트 한다. useMutation훅을 사용하여 데이터를 수정하면, 해당 데이터를 가져오는 목든 쿼리를 자동으로 무효화한다. 또한 useQuery훅에서 제공하는 여러가지 옵션을 사용하여 수동으로 제어할 수 있다.

📄 참고자료

react의 상태관리 종류 4가지
react-query 시작하기 (feat. Tanstack)

설치 npm install react-query@^3
https://onlydev.tistory.com/114
노드16버전으로 변경필요
QueryClinet is not a constructor 오류시 import주소확인필요
import { QueryClinet, QueryClientProvider } from "react-query/";슬래시!!!

다음 포스트