react-query

두 차례 성능 최적화를 진행하고 측정했던 성능 점수입니다. 지난 이야기... 👇 [Next.js] 페이지 성능 개선하기 2 - 번들 사이즈 개선, Tree Shaking 지난 시간에 측정했던 성능 점수입니다. (모바일 기준) 지난 시간에 성능 개선을 시도했던 흔적 👇 [Next.js] 페이지 성능 개선하기 1 - Next/image, CSS 프리로드 최근 들어 성능 최적화에 대한 고민을 cheolsker.tistory.com 이번 포스팅으로 이번 시리즈(?)를 마무리해볼까 합니다. 배너 이미지(LCP)가 늦게 렌더링 되는 원인은 API 호출 후, 이미지 링크를 받아오기 때문인데요. 이 API를 사전에 호출하면 LCP를 개선해볼 수 있을 것 같습니다. 이 프로젝트는 React-Query를 사용하고 있고, ..

[ 목차 ] 사용자에게 최신 데이터를 보여주려는 노력 useQuery useMutation queryClient.invalidQueries 사용자에게 최신 데이터를 보여주려는 노력 React-Query는 사용자에게 새로운 정보를 보여줄 수 있는 옵션을 제공합니다. 1. Remount 컴포넌트 또는 페이지를 다시 mount 했을 때, 새로운 데이터를 갱신합니다. refetchOnMount 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 2. Window refocus 윈도우 창을 다시 focus 할 때, 새로운 데이터를 갱신합니다. refetchOnWindowFocus 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 3. Network reconnect 네트워크가 다..

[ 목차 ] Query 상태 (Status) StaleTime과 CacheTime 정리 Query 상태 (status) 아래 다섯 가지 상태로 정의되어 있습니다. 1. fetching 2. fresh 3. stale 4. paused 5. inactive 1. fetching QueryFn을 이용해서 데이터를 요청하는 상태입니다. 2. fresh 새로운 데이터를 받은 상태입니다. default로 staleTime이 0으로 정의되어 있는데요. default일 때는, 순간적으로 fresh 상태로 유지됩니다. 3. stale 데이터의 상태가 최신이 아님을 뜻하는 상태입니다. 이 상태일 때는 특정 조건 (windowFocus, remount 등...) 이나 백그라운드 상황에서 QueryFn을 통해 새로운 데이터..

React-Query는 useInfiniteQuery hook을 제공합니다. 문서에도 해당 hook에 대한 API 명세와 사용 방법이 소개되고 있는데요. 공식 문서의 설명이 조금 부족해서 그런지는 모르겠는데, 이해가 되지 않는 부분이 있었고 삽질도 하였습니다. 페이지네이션을 구현한 코드를 정리하였습니다. 비동기 통신 라이브러리로는 axios를 사용하였습니다. // 페이징을 구현한 컴포넌트 import axios from "axios"; import { useInfiniteQuery } from "react-query"; interface PostData { body: string; id: number; title: string; userId: number; } function Test1() { const..