React/react-query

눈에 띄는 변화들만 정리 1. 하나의 함수 호출 시그니처(객체 형식)만을 지원 // useQuery - useQuery(key, fn, options) + useQuery({ queryKey, queryFn, ...options }) - useInfiniteQuery(key, fn, options) + useInfiniteQuery({ queryKey, queryFn, ...options }) - useMutation(fn, options) + useMutation({ mutationFn, ...options }) - useIsFetching(key, filters) + useIsFetching({ queryKey, ...filters }) - useIsMutating(key, filters) + use..

placeholderData와 initialData의 공통점 placeholderData 와 initialData는 언뜻보면 용도가 비슷해보입니다. 둘 중 하나의 방법이 제공되면 쿼리가 로딩 상태가 아니라 바로 성공 상태로 전환됩니다. 그렇기 때문에 로딩없이 화면상 컨텐츠의 매끄러운 초기 진입이 가능하게 해줍니다. 둘 다 값을 반환하는 함수 또는 값 자체를 반환할 수 있습니다. 캐시에 데이터가 이미 있는 경우 둘 다 영향을 미치지 않습니다. 하지만 둘은 내부 동작이 다릅니다. *밑에서 observer 얘기가 계속 나올 것이기 때문에 observer 생성 과정에 대하여 간단하게만 알아둡시다. useQuery 호출 ▶ 쿼리 생성 ▶ observer 생성 및 observer mount 각각의 내부 동작 pla..

Tanstack query `4.xx` version 기준으로 필요한 부분을 기록하였습니다. 밑의 여러 훅 중에서 `get / set` 으로 시작하는 훅들을 보게 될텐데 get* 과 set* 훅의 차이점은 크게 get* 훅은 컴포넌트 안팎에서 호출하여 캐시된 데이터를 따로 가져와서 사용할 때 많이 사용한다는 점과, set* 훅은 기본적으로 서버state와 sync를 맞춰야 하기 때문에 mutation의 콜백함수로 많이 사용된다는 점입니다. 이 점을 생각하시고 보면 좋습니다. QueryClient 기본 세팅 QueryClient 기본 세팅 QueryClient 인스턴스를 QueryClientProvider 에 주입하면 내부의 컴포넌트에서는 QueryClient 인스턴스를 사용하여 캐시와 상호작용할 수 있습..

1. Optimistic Update의 개념 낙관적 업데이트가 무슨 뜻일까요? 낙관적?긍정적?인 업데이트? 비슷합니다. 서버와의 REST API 통신이 성공한다는 가정 하에 클라이언트 캐싱 데이터를 조작하고 UI를 업데이트 하는 것이 Optimistic Update 개념의 전부입니다. 쉽게 말하자면 내가 보낸 요청이 무조건 '성공'했을 거라는 가정 하에 UI를 업데이트 해주는 것입니다. react-query는 Optimistic Update를 지원해줍니다! 1-1. 왜 굳이 낙관적 업데이트를 할까요? 간단합니다. 사용자의 UI 를 개선시키기 위함입니다. 예를 들어서 사용자가 게시물 좋아요 버튼을 눌렀을 때 화면에서 즉시 좋아요 ❤️가 활성화되게 할 수 있습니다. 서버의 응답결과는 시간이 조금 걸릴 지라도..

📖 react query의 staleTime과 cacheTime에 refetch 조건에 대한 이해가 필요하다고 생각하여 공식 문서 참고 및 여러 실험 후 기록해둡니다. 0. 옵저버(Observer)와 쿼리(Query) 가장 먼저 react-query의 핵심 개념 중 하나인 옵저버와 쿼리에 대해서 알아보겠습니다. 옵저버(Observer) 옵저버는 비동기 데이터 요청을 추적하고 업데이트를 처리하는 객체입니다. 쿼리의 상태 변화를 감지하고 변화 과정과 결과에 따라서 UI를 업데이트 시킬 수 있습니다. useQuery 훅을 사용하여 옵저버를 생성할 수 있습니다. 옵저버는 다음과 같은 속성을 가질 수 있습니다. isLoading : 캐시에 없는 비동기 데이터 요청이 진행 중인지 여부 isFetching: 비동기 ..

1. 리액트 쿼리의 엄청난 내장 기능 isLoading, isError의 기능이 내장되어 있어 자동으로 처리해준다!!! 👉 편리하다 return 문에 도착하기 전에 isLoading 또는 isError에 따라 별도의 처리를 해주기 때문에 대기 상태 처리 / 오류 처리에 대한 부분이 아주 쉽게 해결이 된다. 기존 미들웨어 코드들에 비해서 코드량이 적고 규격화되어 있기 때문에 책임 소재가 분명해지게 된다. 2. 리액트 쿼리 사용 방법 2-0. 리액트 쿼리 설치 yarn add react-query 2-1. 모든 루트를 QueryClientProvider 로 감싼다. QueryClientProvider는 데이터를 읽어오는 기능(QueryClient)을 애플리케이션 전체에 주입하도록 하는 API 이다. impo..