[유데미] React Query : React로 서버 상태 관리하기 📍React Query Dev Tools이란? - 리액트 쿼리에서 기본 제공하며, 다양한 기능을 제공 - v4 부터 직접 import하게 바뀌었음! npm i @tanstack/react-query-devtools - Development 환경에서만 보여지므로 따로 -D 옵션으로 설치할 필요는 없다 📍기능 1️⃣key에 기반하여 쿼리를 보여준다 - 쿼리들의 상태 - 마지막 업데이트 타임스탬프 2️⃣반환된 데이터를 보여준다 3️⃣쿼리 탐색기 제공 📍사용방법 1️⃣npm install 후, query client를 생성한 컴포넌트 (App) 에서 import 해준다 2️⃣Provider 내부의 최하단에 devtools를 삽입 // App.t..

[유데미] React Query : React로 서버 상태 관리하기 📍prefetching 유저가 다음 페이지로 넘어가기 전에 미리 데이터 받아와서 매끄럽게 UI 변경하는 것 📍기본적인 사용 흐름 overview 1️⃣패키지 설치 npm i @tanstack/react-query 2️⃣query client 생성 - client는 쿼리와 캐시를 관리 3️⃣QueryProvider 적용 - children에 cache, client config 제공 - query client를 값으로 취함 4️⃣useQuery 훅 사용 - 서버에 쿼리하는 훅 📍QueryProvider // app.tsx // import import { QueryClient, QueryClientProvider } from "@tanst..

[유데미] React Query : React로 서버 상태 관리하기 📍@tanstack/react-query npm i react-query 대신 npm i @tanstack/react-query 📍query key들은 배열이어야 함 - 문자열 대신 배열로 묶기 📍devtools를 따로 설치해야 함 npm i @tanstack/react-query-devtools 📍setLogger가 제거됨 - 대신 QueryClient 옵션으로 logger를 추가한다

[유데미] React Query : React로 서버 상태 관리하기 📍클라이언트 상태 vs 서버 상태 - client state : 브라우저의 세션과 관련된 데이터 예) 언어, 테마 등 유저가 선택하는 정보 - server state : 서버에 저장된 데이터 fetching과 updating을 위해 비동기 API가 필요 예) DB에 저장된 post들 📍React Query의 역할 - React 앱에서 서버 상태를 쉽게 fetching, caching, synchronizing, updating 할 수 있다 - fetch로 바로바로 HTTP 요청을 보내서 데이터를 가져오는 것 대신 React Query가 cache한 데이터를 사용 - pagination / infinite scroll 쉽게 구현 가능 📍T..