'프레임워크/React Query' 카테고리의 글 목록
본문 바로가기

프레임워크/React Query4

[React-query] Pagination에 Prefetching 사용하기 현재 진행 중인 프로젝트에 페이지네이션 기능을 구현했는 데 페이지를 넘길 때마다 데이터를 불러오는 속도보다 화면 전환 속도가 더 빨라서(데이터 불러오는 속도 < 화면 전환 속도) 페이지가 넘어가지 않은 듯한 상황이 벌어졌다. 첫 번째 시도 에서는 "QueryClient 설정 중에 keepPreviousData가 true여서 화면이 전환되는 느낌이 안 드는 걸까?"라는 생각으로 false로 바꿨다가 페이지를 바꿀 때마다 loading이 생겨서 바로 true로 바꿔버렸다. keepPreviousData는 fetch된 데이터를 받아오기 전에 loading 대신 이전 데이터를 유지해 주는 소중한 속성이다. // 주로 공통적으로 사용할 옵션을 입력해둘 수 있다. const client = new QueryClie.. 2023. 6. 27.
[React-Query] react-query란? 10분만에 react-query 개념 이해하기 거기 멋진 당신, 읽고 가는게 좋지 않을까? velog.io 지금까지 ajax, fetch, axios순으로 사용해보면서 각각의 장단점과 발전 흐름에 맞춰 익숙해졌고 axios에 편리함을 경험하던 중 아직 확정되진 않았지만 추후 새로 진행할 프로젝트에서는 react-query를 사용해보는 건 어떨까 싶어 공부 전 react-query가 뭔지, 무엇을 해주는지, 왜 사람들이 많이 쓰는지 알아보기 위해서 위 영상과 블로그를 읽어보았는 데 너무 깔끔하게 잘 정리되어 있고 영상으로 한번 더 설명해주시는 점에서 좋았어서 강추 🥸👍 Next.js와 axios, zustand 조합으로 진행하는 프로젝트도 좋았지만 useEffect에 dependency array와 데이터.. 2022. 12. 27.
[React-Query] 세팅하기 (React 버전) react-query 개념 및 정리 react-query 개념 및 정리, react, react16, hook, useState, useRef, useMemo, useEffect, useReducer, useCallback, useQuery 동기적으로 실행 kyounghwan01.github.io Overview Overview React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. .. 2022. 6. 15.
[React-Query] 개념 정리 react-query 개념 및 정리 react-query 개념 및 정리, react, react16, hook, useState, useRef, useMemo, useEffect, useReducer, useCallback, useQuery 동기적으로 실행 kyounghwan01.github.io [React.js] React Query Next.js 에 React Query 를 도입하며, 관련된 사용법과 옵션을 기록하기 위한 글입니다. 💁 React Query의 장점 ✅ 서버 데이터 캐싱 ✅ 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 ✅ prefetchin velog.io react-query란? : 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을.. 2022. 6. 15.
728x90