React Query의 setQueryData 활용한 캐싱된 데이터 업데이트 훅 소개

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