[react] 리액트 쿼리 시작하기

[React] 리액트 쿼리 시작하기

Query란 데이터베이스에 정보를 요청하는 것
React Query란 React 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고 업데이트하는 작업을 쉽게 만든다고 한다.

React Query 탄생기…

보통 무엇이 탄생하게 된 배경에는 문제를 해결하기 위함이라고 생각한닷, 그렇다면 공식문서에서 말하는 문제점은 어떤것인가! 리액트 구성요소에는 데이터를 가져오는 방법이 포함되어 있지않아 개발자가 따로 데이터를 가져오는 방식을 선택하여 구현하게 된다. 이때 클라이언트 상태 작업에는 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않다고 한다 (공식문서에서) 이유는 클라이언트와 서버 상태가 다르기 떄문이라고 한다. 리액트 쿼리 존재 이유는 이로 인해 발생하는 문제점을 해결하기 위함이다,,

1. 캐싱… (아마도 프로그래밍에서 가장 어려운 일) : 해당 데이터에 대한 요청이 있을 경우 더욱 빠르게 요청할 수 있게 하는 것 (기존 데이터를 저장하는 것)
2. 동일한 데이터에 대한 여러 요청 → 단일 요청으로 중복 제거 : 데이터가 여러변 요청 될 경우 불필요한 통신을 대신 막아주는 역할을 해준다고 한다.
3. 백그라운드에서 “오래된” 데이터 업데이트
4. 데이터가 “오래된” 경우 파악
5. 가능한 한 빨리 데이터 업데이트 반영 : 자동으로 업데이트를 해준다고 한다
6. 페이지 매김 및 지연 로딩 데이터와 같은 성능 최적화
7. 서버 상태의 메모리 및 가비지 수집 관리
8. 구조적 공유를 통한 쿼리 결과 메모

V3 → V4

리액트 쿼리에 대해 공부하려 했는데 22년 7월에 V4로 마이그레이션 되었다.. react-query is now @tanstack/react-query 두둥 바뀐점은

• install 할때 달라졌고

  npm uninstall react-query
  npm install @tanstack/react-query
  npm install @tanstack/react-query-devtools
  

  ```js

• import { useQuery } from ‘react-query’
• import { ReactQueryDevtools } from ‘react-query/devtools’
• import { useQuery } from ‘@tanstack/react-query’
• import { ReactQueryDevtools } from ‘@tanstack/react-query-devtools’ ```
• 쿼리 키가 배열로 바뀌었다고 한다 ```js
• useQuery(‘todos’, fetchTodos)
• useQuery([‘todos’], fetchTodos) ```
• setLogger가 제거되었다고 한다. → QueryClient 옵션으로 추가해 한다.
• onSuccess에서 더 이상 setQueryData에서 호출되지 않는다고 한다. (이 부분에서 무한 루프를 생성하고 오류가 발생했던 듯 하다 (?))
• 등등등

사용해보고 싶다 나는 리액트 쿼리를

• SWR 검색했을때 SWR보다 많이 나오는게 SWR → React query로 변경하는 작업에 대한 글이나 차이점에 대한 글이었다.
• npm 순위를 봐도 React query가 높다
• mutate 속성을 아주 사용해보고 싶구
• 에러 핸들링이나 로딩 처리를 믓지게 해보고싶다.

+ 아직 조금 진짜 조금 사용해봤는데 SWR이랑 비슷하면서 다르다, 설정할게 더 많고 알아야 할게 더 많은 느낌이다 그만큼 활용 가능한 부분이 많을 것 같다!
  기대가 되는구만