React Query (5) 썸네일형 리스트형 [번역] Next.js 개발 생산성을 높이는 12가지 멋진 라이브러리 https://medium.com/lets-code-future/12-awesome-next-js-libraries-to-supercharge-your-development-38632f6ae6f3?sk=e1574e38f82e2c7076085b82a550538d 12 Awesome Next.js Libraries to Supercharge Your Development!👋 Hey there, fellow developers! I’m Sachin, and today, I’m bringing you a power-packed list of the 10 best Next.js libraries that will…medium.comLet's Code Future 님의 25.02.05일자 포스트 번역글입니다. 안.. [TanStack Query / React Query] setQueryData : Mutation 응답으로부터의 업데이트 https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역한 글입니다. Mutation 응답으로부터의 업데이트 서버의 객체를 업데이트하는 mutation을 다룰 때, 새로운 객체가 일반적으로 mutati.. [TanStack Query / React Query] useInfiniteQuery와 무한 스크롤 useInfiniteQuery는 페이지네이션이나 무한 스크롤과 같은 데이터 로딩을 구현할 때 사용됩니다. 1. useQuery 와 useInfiniteQuery의 차이 ● useQuery단일 데이터 객체 반환 한 번의 요청에 대한 응답만 저장 ● useInfiniteQuerypages 배열: 모든 페이지의 데이터를 순서대로 저장 pageParams 배열: 각 페이지를 가져올 때 사용된 매개변수 저장 여러 페이지의 데이터를 누적하여 저장 좀 더 이해하기 쉽게 data에 로그를 찍어보면 useQuery 와 uesInfiniteQuery 의 반환되는 data 의 구조는 다음과 같은 차이가 있습니다 1-1. useQuery const { data } = useQuery({ queryKey: ['i.. [TanStack Query / React Query] staleTime과 gcTime 이해하기: 데이터 캐싱 1. stale data 데이터의 사용 기간이 지났고, 다시 가져올 준비가(refetch) 되 있는 상태입니다여전히 데이터는 캐시 안에 있습니다데이터를 다시 검증해야 한다는 뜻데이터 새로 고침(refetch) 은 오래된 데이터( stale data )에 대해서만 트리거됩니다자동으로 데이터 새로 고침을 하는 트리거는 컴포넌트 remount 나 브라우져 창의 refocus가 있습니다staleTime 은 데이터의 최대 수명이라고 생각하면 됩니다그러므로 데이터 새로고침 기능을 컨트롤하고 싶다면 이와 관련된 useQuery 의 옵션 중 하나인 staleTime 을조절하면 됩니다(staleTime 이 2초 (2000 ms) 라면 2초 동안에는 데이터 새로 고침이 되지 않습니다 staleTime 은 default 로.. [TanStack Query / React Query] useQuery 훅의 isLoading isFetching isPending 차이 isPending: 캐쉬된 데이터가 없고 아직 쿼리가 수행되지 않은 경우입니다. isFetching: 비동기 쿼리 함수가 수행 중인 상태, 모든 데이터 로딩 상태에서 trueisLoading: (이전의 isInitialLoading) 캐쉬된 데이터가 없으며, 비동기 쿼리 함수가 수행 중인 상태 . 그 말은 데이터의 첫 번째 로딩 시에만 true가 된다는 뜻 입니다. isPending && isFetching === isLoading isPending && isFetching 라고 해서 처음에는 isLoading 에 대해 좀 헷갈렸는데.. isPending 과 isLoading은 쿼리의 수행 유무에 따라 반대값이 나오게 됩니다. const.. 이전 1 다음
