React Query (7) 썸네일형 리스트형 리액트 쿼리와 비교한 RTK Query와 Mutation(뮤테이션), 캐싱 동작 사내 프로젝트에서 Redux Toolkit을 도입하였기에, 주로 사용하던 Redux Query 대신에 RTK Query를 사용해 보았다. RTK Query와 React Query의 차이점 : 큰 그림 RTK Query는 프레임워크와 무관한 기능들만 포함한다. RTK Query는 React Query의 대부분의 페칭 기능들을 포함하고 있다. 하지만 React Query의 명칭이 의미하는 것처럼 React Query는 Hook과 React에 최적화된 몇몇 기능들을 포함하고 있다. useInfiniteQuery Suspense및 ErrorBoundary 따라서 무한 스크롤이나 서스펜스가 필요하다면 Wrapper 코드를 작성해야 한다. (보니까 Apollo-Client도 유사하다.) 기능 비교표는 아래 링크를 .. zustand와 react query를 같이 사용하는 방법 zustand와 react query는 둘 다 여러 개의 전역 스토어를 지향합니다. 두 라이브러리를 같이 잘 사용하는 방법을 배워봅시다. 대부분의 아이디어는 아래 글에서 가져왔습니다. https://tkdodo.eu/blog/working-with-zustand Working with Zustand Let's dive into some tips for working with Zustand - one of my favourite client state management libraries in React. tkdodo.eu Zustand 전역 스토어를 제공하며 셀럭터를 포함한 간단한 API를 포함합니다. 용량도 매우 작습니다.(1.1kb) 개념적으로 리덕스와 비슷합니다. 사용중인 필드를 셀렉터로 추적해야 .. 리액트 쿼리 : 쿼리 상태 체크 원문 보기 : https://tkdodo.eu/blog/status-checks-in-react-query 쿼리 상태는 아래 4개 중 하나입니다 success : 쿼리가 성공했으며 이에 대한 데이터가 있습니다. error : 쿼리가 실패했으며, 이에 대한 정보를 담은 에러가 설정되었습니다. loading : 아직 쿼리 데이터가 없으며, 처음 로딩 중입니다. idle : 사용이 설정되지 않아 쿼리가 실행된 적이 없습니다. 업데이트: React Query v4에서 idle 제거 isFetching 플래그는 요청 중일 때만 true지만, 내부 상태머신의 상태가 아님. 자세한 내용은 #13: Offline React Query 참조 로딩 상태, 오류 상태를 먼저 확인하기 명시적 사용자 상호작용 시에만 데이터를 .. 리액트 쿼리 : 서버 응답 변환 위치 원문 : https://tkdodo.eu/blog/react-query-data-transformations 어떤 방법이 가장 좋을까? 그때그때 다르다. - 모든 개발자, 항상 0. GraphQL 사용과 백엔드 개발자의 지원 우리가 할 일이 없음. 하지만 항상 가능한 것이 아님. 1. 쿼리 함수 안에서(queryFn) queryFn은 useQuery에 전달하는 함수입니다. Promise를 반환할 것으로 예상하고 결과 데이터는 쿼리 캐시에 저장됩니다. 이 함수가 항상 백엔드가 제공하는 구조로 데이터를 반환할 필요는 없습니다. const fetchTodos = async (): Promise => { const response = await axios.get('todos') const data: Todos .. 리액트 쿼리 : 반드시 알아야 하는 상식 https://tkdodo.eu/blog/practical-react-query Practical React Query Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful... tkdodo.eu 해당 게시물을 요약정리한 글임 리액트 쿼리와 서버 상태 Apollo Client는 서버 데이터와 서버 데이터 캐시를 이용한, 서버 사이드 상태 관리의 신기원을 열었음. 이는 수 많은 전역 상태의 클라이언트 측 (중복) 관리 부담을 줄여줬으나, GraphQL을 도입하기 위해선 백엔드의 조정이 가장 큰 장벽이었고, 오버페칭, 언더페칭을 포함.. React Query에는 Debounce와 Throttling이 없다? React-query에서 기본적으로 제공하는 debounce, throttling 기능이 없어 곤혹을 겪었다. 복습 및 예방 차원에서 구현을 학습해보자. 원리는 쿼리키 배열로 전달되는 값의 변화를 지연하여 전달하는 것이다. 참고한 글 : https://www.codingdeft.com/posts/react-debounce-throttle/ Debounce(디바운스) 일정 시간동안의 요청을 묶어 최종 요청 하나만 처리한다. 요청은 뒤에 트리거된다. import React from "react"; export default function useDebounceValue(value: T, delay: number = 500) { const [debouncedValue, setDebouncedValue] = R.. 대규모 프로젝트 React Query 아키텍처 원문 보기 Building The Real App With React Query — Smashing Magazine In this article, Georgii Perepecho explains the most common React Query features that you need to be familiar with when creating a real-life application that is stable when testing. www.smashingmagazine.com 원문의 완성된 프로젝트 레포지토리 GitHub - horprogs/react-query: An example of building the app using React Query. An example of building th.. 이전 1 다음
