Algoroot's space

안녕하세요. 오늘은 React Query에서 유용하게 활용할 수 있는 util 함수와 hook을 소개해드리려고 합니다. 특히, 여러 API 요청을 동시에 처리할 때 쿼리의 로딩 상태를 관리하는 데 도움을 줄 수 있는 방법을 다루겠습니다. 리액트 애플리케이션을 개발하다 보면 여러 API 요청을 동시에 처리해야 하는 상황이 자주 발생합니다. 이런 경우 각 요청의 로딩 상태를 효과적으로 관리하고 UI에 반영하는 것이 중요합니다. 오늘은 React Query를 활용하여 다중 쿼리의 로딩 상태를 깔끔하게 관리하는 방법을 공유해보려고 합니다. 왜 다중 쿼리의 로딩 상태 관리가 필요할까요?예를 들어, 블로그 애플리케이션을 생각해보세요. 이 애플리케이션에는 두 개의 탭이 있어, 각각 "최신 글"과 "인기 글"을 표시합..

안녕하세요, 오늘은 React Query의 setQueryData 함수를 편리하게 사용하기 위해 만든 useSetQueryData 훅에 대해 소개하려고 합니다.배경 이전에는 주로 캐싱 데이터를 업데이트할 때 UI 업데이트를 위한 Optimistic Update 용도로 사용하고는 했는데, 최근 프로젝트에서 수많은 ApI 요청으로 인한 서버 비용을 개선하기 위해 캐시를 수정하게 되었습니다.  동기 Optimistic Update를 처음 접했을 때 인피니티 쿼리에 적용하면서 다가가기 어렵고, 시간도 꽤 소요되었던 경험이었어, 처음 접하시는 분들이 더 쉽게 활용할 수 있도록 쿼리 캐시 수정용 훅을 만들었습니다. setQueryData 용도빠른 UI 업데이트어떠한 데이터를 수정, 삭제, 생성 (mutate) 한 ..