react-query2 tanstack-query(react-query) staleTime과 refetchInterval을 활용한 네트워크 요청 최소화 방법 tanstack-query의 기초를 다시 보면서 전에 팀 프로젝트를 진행할 때 네트워크 요청이 많아 사용량이 다 차버린 생각이 나서 네트워크 요청을 최소화하는 방법을 찾게 되었다. 상황 및 문제점먼저 네트워크 요청을 줄이려면 tanstack-query의 데이터 캐싱을 사용해야 하는데 기존에는 stale time을 설정하지 않아서 0 이였다. 이 값이 0이면 데이터가 fresh 상태가 되지 않고 계속 stale 상태가 되어 계속 요청을 보내게 된다. tanstack-query의 캐싱 기능을 사용하지 않게 되는 것이다. 그런데 staleTime을 조정해서 캐싱되는 시간을 확보하려고 하는데 문제가 되는 점이 있었다. 예를 들어 내가 좋아요 한 글이 있는데 이 글의 제목이나 유저가 좋아요를 취소하는 등의 변경이.. 2024. 8. 12. react-query useQuery / useMutation react-qeury란 React에서 데이터를 관리하기 위한 라이브러리이다. 주로 백엔드와 데이터 통신을 담당한다. 서버에서 가져온 데이터의 상태를 자동으로 관리하여 로딩 중, 성공, 실패 등의 상태를 쉽게 파악할 수 있다. 설치 yarn add react-query 적용 최상위 컴포넌트에서 new QueryClient 만든 후 감싸준다. import React from "react"; import Router from "./shared/Router"; import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( ); }; expo.. 2024. 2. 19. 이전 1 다음