달콤한 개발 일기

[refresh 활용]invalidateQueries 방식의 단점은 짧은 시간동안 동일한 페이지를 클릭하는 경우 서버 호출이 많아짐refresh 값과 staleTime을 같이 사용하여 문제 해결const {isFetching, data, error, isError} = useQuery({ queryKey: ['products/list', {page, size, refresh}], queryFn: () => getList({page, size}), staleTime: 1000 * 5 }) //const queryClient = useQueryClient() // 리액트 쿼리 초기화를 위한 현재 객체 const handleClickPage = (pageP..

[useQuery를 이용한 상품 조회]useQuery는 특정 데이터를 조회하고 통신 상태나 결과 혹은 에러 데이터 등을 한 번에 처리할 수 있게 도와줌사용 전에 useEffect로 서버 데이터를 가져온 후에 상태를 변경 ...const ReadComponent = ({pno}) => { // 화면 이동용 함수 const {moveToList, moveToModify} = useCustomMove() const { isFetching, data } = useQuery({ queryKey: ['products', pno], queryFn: () => getOne(pno), staleTime: 1000 * 10, retry: 1, })..

React Query리액트 애플리케이션의 데이터를 크게 내부에서 유지되는 데이터와 API 서버에서 발생하는 외부 데이터로 구분되는데 React Query는 주로 외부에서 만들어진 데이터를 관리하는데 도움이 되는 라이브러리 React Query의 가장 중요한 특징은 데이터를 일정 시간 동안 보관하는 캐싱 기능으로 단순히 데이터를 보관하는 기능이 아니라 일정 시간이 지나면 새로 서버에서 호출하도록 구현할 수 있음 [React Query 설정]npm i @tanstack/react-querynpm i @tanstack/react-query-devtoolsnpm을 통해 React Query 5 버전과 편리한 개발을 위해 devtools도 추가 import { RouterProvider } from "react-..