# reactquery
React-Query 정리
React-Query란서버 상태 관리를 위한 라이브러리자체적 캐싱 기능이 존재 (Hooks 기반 라이브러리)캐싱, get한 데이터 자동 updating 지원, 중복 호출 컨트롤 지원, 무한 스크롤, 쉬운 비동기 관리React-Query의 라이프 사이클1\. Fetchi
2023.02.01
staleTime - refetch 하는 기준이 되는 시간cacheTime - fetch 되었을때, 캐싱된 데이터의 유지시간useQuery의 enable 옵션을 true로 설정쿼리키를 state로 관리하고,fetch 메소드를 구현해둔다.쿼리키 삭제쿼리키 다시 세팅htt
[React] React Query 공부하기
GraphQL을 썼던 나는 회사에서 Rest API를 쓰면서 아주 다양한 불편함을 겪는 중... 동기 덕분에 React Query란 라이브러리를 알게 되었고, GraphQL을 썼던 때와 생김새가 비슷하다고 생각됐다 그래도 처음 쓰는 라이브러리이고 많이 사용되고 있는 라
React | React Query
UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다.즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. #2. 상태란? 주어
[React] React Query
React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리입니다.저의 경우 서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그렇다보니 store는
React 학습 _ recoil이란?
todo list 학습 스프린트 리액트를 사용하여 투두 리스트를 만들어 보세요! > 필수 구현 사항 Todo CRUD 필수 기능을 구현해 주세요 Todo 에 카테고리를 추가해 주세요! 카테고리별로 화면에 렌더링을 해주세요! json-ser
React Query - Mutaion, Invalidation
Mutaion(변이): 서버 데이터 업데이트하기 낙관적 업데이트(Optimistick Update): 여기서 낙관적이란 변이가 성공하기를 희망하지만 실패하더라도 롤백할 수 있다는 의미이다. 변이에 대한 전역 페칭(Global Fetching), 인디케이터 및 오류 처리
React Query - 사용자 로그인, 의존적 쿼리
사용자 인증 setQueryData: 실제로 캐시에 데이터를 설정하기 위함 removeQuries: 캐시에서 쿼리를 삭제하기 위함 ⭐️ JWT(JASON Web Token) 인증 토큰 JWT는 클라이언트가 사용자 명과 비밀번호를 보내고 이것이 데이터베이스에서 일치한다
React Query - 데이터 프리페칭(pre-fetching)과 리페칭(re-fetching), select option
캐시에 아직 데이터가 없는 경우 미리 데이터를 채울수 있다.유효한 데이터인 경우 채울 수 있디만 자리표시자 데이터인 경우 추가하지 않는다.queryClient의 메서드이므로 useQuery와 달리 클라이언트 캐시에 추가된다.일회성이다.정적인 데이터를 호출할 때 적합하며
React Query - 중앙 집중화
useIsFetching 중앙화된 로딩 인디케이션 적용 현재 가져오는 중인 쿼리가 있는지 알려주는 훅 각각의 커스텀 훅에 대해 isFetching을 사용할 필요가 없어진다. 현재 가져오기 상태인 쿼리 호출의 수를 나타내는 정수값을 반환한다. useIsFetching이
React query - "동적(JIT)"데이터 로드를 위한 무한 쿼리
사용자가 페이지의 특정 지점을 누르거나 버튼을 클릭하면 더 많은 데이터가 로딩이 된다.다음 쿼리가 무엇일지 추적한다.두 개의 프로퍼티를 가진다. pages: 페이지 객체의 배열(Array)인 페이지, 페이지에 있는 각 요소가 하나의 useQuery에서 받는 데이터에 해
React query - pagination, prefetching, mutations
목차 fetching data loading/ error states dev tools pagination prefetching mutations 🔗 get start 1. 설치 > npm i react-query@^3 2. query client 쿼리와 서버의
React Query
리액트에서 API를 호출하여 화면에 뿌리는 것을 만드려면 간단하게 해도 state는 최소 2개가 사용되고 (data 저장용, loading 체크용 state) + fetch 함수 작성까지 > 코드가 꽤 길어지고 가독성이 떨어지게 된다. 그리고 만약 페이지 첫 방문시에
[React - infiniteScroll] 스타워즈 API로 인피니티 스크롤 만들기!
스타워즈 API와 React-Query, infinite-scroll 패키지를 이용해서 인피니티 스크롤을 만들었다.