React Query

React Query는 서버의 상태를 다루기 좋은 라이브러리라고 소개된다. 공식문서: React Query는 종종 React용 누락된 데이터 가져오기 라이브러리로 설명되지만 보다 기술적인 용어로 React 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트

먼저 React Query를 사용하기 위해서 해야할 것들이 있다. ✅ query client 생성하기쿼리 및 캐시를 관리하는 클라이언트 ✅ QueryProvider 적용하기자녀 컴포넌트에 캐시와 클라이언트 구성을 제공쿼리 클라이언트를 값으로 사용클라이언트가 가지고 있는

이번엔 다음 및 이전 페이지로 이동을 위한 버튼을 구현해보자.그러기 위해서는 React Query의 Pagination을 이용하면 된다.Pagination은 currentPage 상태를 통해 현재 페이지를 파악하는 페이지 매김 스타일이다.이 방법은 댓글을 작업했듯이 페

이번엔 useMutation에 대해 알아보자. useMutation은 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 실시한다. 예를 들어 블로그 게시글을 추가, 삭제, 변경하는 경우이겠다. (공식문서)mutationFn은 mutation Function으로 pr

직전에 쇼핑몰 프로젝트를 진행하며 상품들을 무한스크롤하여 표현할때 React Query의 Infinite Scroll 기능을 사용하였는데 당시에는 구현하는데 급급했으니 이번에 제대로 한번 알아보도록 하자.Infinite Scroll은 간단하게 설멍하면 사용자가 스크롤할

조금 규모가 있는 앱에서는 Fetching과 Error에 대한 관리를 중앙화해주고 Refetching 해주는 과정이 있으면 좋다. 특히, 규모가 있는 앱들은 각 데이터 유형에 따른 커스텀 훅을 만든다.이번에는 React Query를 규모가 있는 앱에서 사용했을 때 어떻

React Query의 Pagination과 Prefetching에 대한 기능은 앞서 공부해보았다.이번엔 조금 더 규모가 있는 앱에서 프리패칭의 핵심 기능을 동작하는 PrefetchQuery에 대해 자사하게 알아보자.🧐 그전에 React Query로 데이터를 미리 채

어느 프로젝트를 보든 대부분 포함되어있는 기능 중 하나가 아마 필터링 기능이지 않을까 싶다. 이전에 내가 필터링 기능을 구현할 때는 클라이언트단에서 서버로부터 받은 데이터를 가지고 필터링을 해주거나, 프론트엔드에서 원하는 데이터만 요청시 서버단에서 그에 대한 필터링된

🚀 Start

이제 로그인 기능에 대한 사용자 인증을 React Query를 통해 어떻게 처리하는지 알아보자.우선 사용할 인증은 JSON Web Token이다.✅ JWTJWT는 클라이언트가 사용자 이름과 비밀번호 정보를 보내고 이 정보들이 데이터베이스의 값과 일치하면 서버가 토큰을

지금까지는 데이터를 가져오는 방식의 query 요청에서 대해서 커스텀훅을 사용하여 전역적으로 사용할 수 있게 하는 방법들에 대해 알아보았다. 이번엔 데이터 업데이트에 대한 mutate 요청에 대해서도 커스텀훅을 사용하여 전역적으로 패칭이 가능하게 하고 그에 대한 에러

🚀 Start 앞서 구현해본 쿼리 무효화를 통한 데이터 업데이트는 한가지 단점이 존재한다. 아래의 network 관리창을 확인해보면 appointments 데이터가 두번 통신한 것을 확인할 수 있다. 왜냐하면 한번은 기존의 데이터가 요청되었다가 무효화되었고, 새

https://gingerkang.tistory.com/123

🚀 Start useQuery의 속성인 isLoading, isError를 통해 데이터 상태를 UI로 구현하여 사용자 경험을 개선시킬 수 있었다. 하지만, query 요청이 필요한 컴포넌트마다 useQuery의 속성을 사용해야하므로 이는 비효율적이라는 생각이 들었다