vitamin3000 님의 블로그

이어서 나머지 내용을 정리해보고자 한다.이 포스트는 https://www.heropy.dev/p/HZaKIE를 참고하여 작성하였다.  상태 확인isFetching 은 쿼리 함수(queryFn)가 실행 중인지의 여부로, 데이터를 가져오는 중을 나타낸다 isPending은 캐시된 데이터가 없고 쿼리가 아직 완료되지 않은 상태의 여부로, initialData 혹은 placeholderData 옵션으로 데이터를 제공하면 출력 대기(Pending)가 필요하지 않으므로 false를 반환한다.따라서 상황에 따라 사용할 때 enabled 옵션을 false로 지정하면 쿼리가 대기 상태로 시작하므로 isPending은 true를 반환한다. export default function DelayedData() { const..

이번 포스트에서는 박영웅 강사님의 https://www.heropy.dev/p/HZaKIE를 참고하여 정리된 내용을 실제로 실행시켜보고자 한다.  프로젝트 설치 방법CLI 환경에서 다음의 명령어를 실행한다.npm create vite@latest .npm i npm i @tanstack/react-querynpm i -D @tanstack/eslint-plugin-query eslint를 사용하는 이유는 ESLint 플러그인의 권장 규칙을 사용하면 일반적인 실수를 피할 수 있기 때무ㄴ,exends 옵션의 배열 아이템으로 아래 내용을 추가한다.plugin:@tanstack/eslint-plugin-query/recommended 프로젝트 범위를 로 랩핑하고, 사용할 queryClinet 인스턴스를 연결한다..

이번 포스트에서는 Tanstack-query를 공부하면서 느낀점을 서술해보고자 한다. 먼저 잘 이해가 가지 않았던 질문들을 gpt와 질의응답을 통해 작성해보았다. 1. useQuery와 useSuspenseQuery를 언제 사용하는가?useQuery : 비동기 데이터를 패칭할 때 사용, 데이터 로딩 상태 오류 상태 등을 관리할 수 있다useSuspenseQuery : React의 Suspense를 활용하여 데이터 로딩 상태를 자동으로 처리한다. 여기서 추가적으로 우리는 학습으로 useQuery는 병렬처리, useSuspenseQuery는 직렬처리한다고 배웠다.tanstackquery에서 직렬처리하라고 권장하기 때문에 useSuspenseQuery를 사용하자 2. useSuspenseQuery을 사용할 때..

그렇다면 React Query를 직접 사용해보자~ 먼저 다음의 CLI환경에서 명령어를 실행하여 설치한다npm install @testing-library/react-hooks react-test-renderer --save-dev 우리의 첫번째 테스트예를 들어 다음의 사용자 hook이 존재한다고 가정해보자export function useCustomHok() { return useQuery({ queryKey: ['customHook'], queryFn: () => 'Hello' })} 쿼리가 병렬로 실행되지 않도록 해야한다 재시도 해제지수 백오프를 사용하여 3번의 재시도로 기본 설정되어있으므로 오류가 있는 쿼리를 테스트하는 경우 테스트가 시간 초과될 가능성이 높다따라서 재시도에 대한 설정이 필요한데,Q..

React Query는 구성 요소가 실제로 필요할 때만 다시 렌더링되도록 다음의 방법으로 수행된다 구조적 공유React Query는 구조적 공유란 기술을 사용하여 간읗나 많은 참조가 다시렌더링 되는 동안 그대로 유지되도록 한다 일반적으로 네트워크를 통해 데이터를 가져오면 응답을 JSON 구문 분석하여 완전히 새로운 참조를 받는다.그러나 React Query는 데이터에서 아무것도 변경되지 않으면 원래 참조를 유지한다.하위 집합이 변경된 경우 React Query는 변경되지 않은 부분을 유지하고 변경된 부분만 대체한다. 참조적 통일성useQuery, useInfiniteQuery, useMutation에서 반환된 최상위 객체와 useQueries에서 반환된 Array는 참조적으로 안정적이지 않다.왜냐하면 모..

React Query를 사용하거나 실제로 컴포넌트 내부에서 데이터를 패치할 수 있는 모든 데이터 패칭 라이브러리를 사용할 때가장 큰 성능 저해 요인은 요청 워터풀이다. What is 요청 워터풀요청 폭포 현상은 리소스(코드, CSS, 이미지, 데이터)에 대한 요청이 다른 리소스에 대한 요청이 완료된 후에야 시작되는 경우이다. 웹 페이지를 생각해보았을 때, CSS,. JS를 로드하기 전에 브라우저는 먼저 마크업을 진행해야 한다.1. |-> Markup2. |-> CSS2. |-> JS2. |-> Image JS 파일 내부에서 CSS를 가져오면 두배의 워터풀이 생긴다1. |-> Markup2. |-> JS3. |-> CSS 해당 CSS가 배경 이미지를 사용하는 경우 트리플 워터풀이 발생..

이번 포스트에서는 QueryFilters와 MutationFilters 객체에 대해 알아보고자 한다. Query filters특정 조건을 충족하는 쿼리와 일치하는 개체를 반환한다.await queryClient.cancleQueries() // 모든 쿼리 취소// posts란 key를 가진 모든 inactive 상태의 쿼리를 지운다queryClient.removeQueries({ queryKey: ['posts'], type: 'inactive' })// type이 active인 모든 쿼리를 refetchawait queryClient.refetchQueries({ type: 'active' })// posts로 시작하는 키 && active 상태인 쿼리를 refetchawait queryClient.r..

이번 포스트에서는 데이터를 생성/업데이트/삭제하거나 섭서 사이드 이펙트를 수행하는데 사용하는 Mutations에 대해 알아보고자 한다. useMutation hook다음은 서버에 새로운 할 일을 추가하는 예시이다.function App() { const mutation = useMutation({ mutationFn: (newTodo) => { return axios.post('/todos', newTodo) }, }) // ... Mutation에 대한 상태값 처리는 이전 포스트와 동일하다.https://vitamin3000.tistory.com/199 TanStackQuery (3) - Queries쿼리 기본 사항쿼리는 고유 키에 연결된 비동기 데이터 소스에 대..

이번 포스트에서는 캐시에 쿼리에 대한 초기 데이터를 미리 저장하는 방법에 대해 알아보고자 한다. initialData를 사용하여 캐시를 미리 채우는 방법앱에서 이미 쿼리에 대한 초기 데이터가 존재하는 경우 config.initialData 옵션을 사용하여 초기 데이터를 설정하고 초기 로딩 상태를 생략할 수 있다. *주의사항 : 플레이스홀더데이터를 사용해야한다 왜? -> initialData는 캐시에 저장되기 때문const result = useQuery({ queryKey: ['todos'], queryFn: () => fetch('/todos'), initialData: initialTodos,}) 값이 아닌 함수로도 전달할 수 있다. 초기 데이터 함수쿼리의 초기 데이터에 엑세스하는 프로세스가 집..

이번 포스트에서는 지난 포스트에서 학습한 페이지별, 무한 스크롤을 실제로 적용해보고자 한다. QueryClientProvider로 최상위 컴포넌트를 감싸야 한다.왜? -> 이것을 통해 React Query의 전역 상태를 관리하기 때문import React from 'react';import ReactDOM from 'react-dom/client';import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import App from './App';const queryClient = new QueryClient();ReactDOM.createRoot(document.getElementById('root')).render( ..