react-query2 [React-Query v3] 리액트 쿼리 간단히 적용해보기 쿼리 생성하기 1. 리액트 쿼리 라이브러리를 다운로드한다. npm i react-query 2. 쿼리를 사용할 모든 컴포넌트의 최상위 부모 컴포넌트에서 쿼리 클라이언트를 공급한다. (여기서는 app.js 에서 공급) import { Posts } from "./Posts"; import "./App.css"; import { QueryClient, QueryClientProvider } from "react-query"; // 1. 쿼리 클라이언트 생성 // Client를 생성하면 Provider를 모든 자식 컴포넌트에 클라이언트를 사용할 수 있게 한다. const queryClient = new QueryClient(); function App() { return ( // 2. Provider를 사용하.. 2022. 7. 9. [React-Query v3] 리액트 쿼리(React-Query) 간단 정리 React-Query란 ? React에서 비동기에서의 상태 관리 작업을 쉽고 효과적으로 할 수 있게 해준다. 서버의 상태 관리를 react에서 할 수 있는 서버상태 관리 라이브러리 이다. React-Query의 기능 캐싱 리액트 쿼리는 클라이언트에서 서버 데이터 캐시를 관리한다. 서버 데이터가 필요할 때, 백엔드로 비동기 요청을 하지 않고 쿼리에 캐시를 요청하여 빠르게 데이터 값을 가져올 수 있다. (Pagination 이나 Infinite scrolling 등 지연 로딩이 걸리는 부분에서 빠른 렌더링 가능) 프리패칭 (Prefetching) Pagination 이나 Infinite scrolling 등 지연 로딩이 걸리는 기능에서 필요한 데이터를 미리 가져와 빠른 렌더를 할 수 있다. 동일한 데이터를 .. 2022. 7. 8. 이전 1 다음
