리액트 쿼리를 사용한 프로젝트를 만들기위해 리액트쿼리에대한 개념 정리 공간입니다. useStateuseReducer ❗ useState는 하나의 상태관리만 가능하고, useReducer는 여러개의 상태관리가 가능하다는 큰 차이점이 있다. useContext(Contex
데이터가 로딩 중인지 여부와 데이터를 가져올때 오류가 있는지를 가르쳐준다.isFetching: 어떠한 react-query요청 내부의 비동기 함수가 처리되었는지 여부에 따라 true/false로 나누어 진다. isLoading: 캐시된 데이터조차 없이, 처음실행된 쿼리
개발자도구는 앱에 추가할 수 있는 컴포넌트로 개발 중인 모든 쿼리의 상태를 표시해 주고 예상대로 작동하지 않는 경우 문제 해결에 도움을 준다. 쿼리키로 쿼리를 표시해 줌활성(active), 비활성(inactive), 만료(stale) 등 모든 쿼리의 상태를 알려줌마지막
queryKey을 기반으로 데이터 캐싱, refetching, 쿼리들을 공유할 수 있다. \- queryKey를 통해서 다른 곳에서도 해당 쿼리의 결과를 꺼내오는 것이 가능하다.내부적으로 데이터를 캐시하고 쿼리에 대한 종속성이 변경될 때 자동으로 다시 가져올 수 있
프로젝트를 진행하다보면 페이지네이션을 구현해야할 때가 많을 것이다. 이번에 리액트 쿼리를 배우면서 리액트 쿼리의 pagination을 구현하는 방법을 공부해 보았다.\- Pagination(페이지네이션)이란?현재 페이지 상태를 통해 현재 페이지를 파악하는 페이지 매김
데이터가 실제로 필요하기 전에 사전에 데이터를 가져오고 캐시에 저장하는 프로세스를 말한다. 이를 통해 데이터를 미리가져올 수 있으므로 필요할 때 데이터를 즉시 사용할 수 있도록 하여 애플리케이션의 응답성과 사용자 경험을 개선할 수 있도록 한다. 데이터를 사용하고자 할
변환객체에 변이 속성을 실행하여 변이의 호출을 조절할 수 있고 useQuery에서 진행한 것과 유사한 방식으로 주기를 처리할 수 있다. Mutation은 서버에 데이터를 업데이트 하도록 서버에 네트워크 호출을 실시한다. CRUD에서 useQuery가 C를 맡았다면, u
*환경셋팅 react-infinite-scroller는 react17버전에서 지원하지 않기 때문에 플래그 설치가 필요! npm i--legacy-peer-deps npm install react-query 리액트쿼리 설치 (버전3) npm install @react
React Query: 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만드는 상태관리 라이브러리.캐싱자주 필요한 데이터나 값의 복사본을 일시적으로 저장, 보관하기 위해 사용하는 곳을 캐시라고 하고 이 캐시를 사용하는 것을 캐싱이라고한다