[React] React Query

 

 React Query

비동기 데이터 관리를 편리하게 할 수 있도록 도와주는 라이브러리.
데이터를 가져오고, 캐싱하고, 동기화하는 과정에서 개발자가 직접 상태를 관리하지 않아도 됨.

 

React Query 장점

• 자동 캐싱: 같은 queryKey로 데이터를 요청하면 이미 가져온 데이터를 캐싱하여 불필요한 요청을 줄임.
• 자동 리패치: 데이터가 변경되면 자동으로 새로고침하여 최신 상태 유지.
• 로딩 및 에러 핸들링 내장: isLoading, isError 등의 상태를 제공하여 쉽게 관리 가능.

 

* 서버 데이터를 중심으로 전역 상태를 유지하고, 최신 상태를 유지하고 싶다면, Redux보다 더 적합.
* UI 상태나 로그인 여부 같은 서버와 관련 없는 상태는 Redux가 더 적합.

 

---

 

useQuery

React Query에서 데이터를 가져올 때(GET 요청) 사용하는 훅.
이를 사용하면 자동으로 데이터를 캐싱하고, 로딩 상태 및 오류 상태를 관리.

 

* useQuery 인자

• 쿼리 키 (Query Key)
  
  
• 데이터 패칭 함수 (Query Function)
  API 요청을 보내서 데이터를 가져오는 역할 (fetch, axios등)

 

* useQuery 반환값

• data 
  가져온 데이터 (데이터 패칭 함수의 반환값)
• isLoading
  데이터가 로딩 중일 때 true
• isError
  에러가 발생하면 true
• error
  실제 에러 객체 (error.message로 상세 에러 확인 가능)

 

---

 

useMutation

React Query에서 데이터를 수정(PUT), 생성(POST), 삭제(DELETE)할 때 사용되는 훅.

 

* useMutation 인자

• 실행할 비동기 함수 (Mutation Function)
  자동 실행되지 않으며, mutate를 호출해야 실행. (fetch, axios등)
  
• 옵션 객체
  - onSuccess: 요청이 성공하면 실행되는 콜백 함수.
  - queryClient : useMutation을 사용하여 데이터를 변경한 후, 최신 데이터를 UI에 반영하기 위한 함수

 

* useQuery 반환값

• mutate
  실행할 함수 (데이터 수정 요청)
• isLoading
  요청이 진행 중이면 true
• isError
  요청이 실패하면 true
• error
  에러 정보
• isSuccess
  요청이 성공하면 true

 

---

 

queryClient 함수

• invalidateQueries()
  기존 데이터를 무효화하고 다시 가져오도록 트리거 (useQuery가 refetch하도록) 
• setQueryData()
  기존 캐시 데이터를 직접 수정
• getQueryData()
  현재 캐시된 데이터를 가져옴
• removeQueries()
  특정 쿼리 키의 캐시 데이터를 삭제

 

( invalidateQueries 예시 )

const { mutate } = useMutation((updatedData) => updateUser(userId, updatedData), {
  onSuccess: () => {
    queryClient.invalidateQueries(['user', userId]); // 해당 유저 데이터 갱신
  },
});

=> ['user', userId]라는 쿼리 키를 가진 데이터를 다시 가져오도록 트리거. ( 무효화 + 자동refetch )

 

 

 

 

---

 

https://musma.github.io/2023/09/14/react-query.html

React-query 를 사용해 상태관리를 해보자

 

 

https://velog.io/@woohm402/no-global-state-manager

전역 상태 관리를 사용하지 않는 7가지 이유