728x90 반응형 리액트쿼리2 리액트 쿼리3 const treatments = useTreatments(); .... return( treatments.map((el)=>( {el} )) ) useTreatments(); => get을 아예 hook으로 뺌 import { useQuery } from 'react-query'; import type { Treatment } from '../../../../../shared/types'; import { queryKeys } from '../../../react-query/constants'; async function getTreatments(): Promise { const { data } = await axiosInstance.get('/treatments'); return data; } exp.. 2023. 11. 26. 낙관적 업데이트 & finally() 낙관적 업데이트 => 서버에 요청을 보내고 받기 전에 요청되었을 거라 낙관적으로 판단-> 빠르게 UI 그리기 를 위해 바뀐 데이터를 get하기 전 미리 UI를 그리는 것 예를 들면 todoList 만들 때 삭제 후 전체데이터에서 삭제된 데이터만 빼고(filter 사용) UI를 그리는 것 리액트 쿼리가 사기라더니 리액트 쿼리는 낙관적 업데이트도 해준다고 한다 useMutation 사용하는 건데 혹시 그 사이 발생할지 모르는 리패치를 취소 시킴 미리 업데이트 전 데이터를 변수에 담아놓고 (요청이 잘못될 수도 있으니까) setQueryData 를 이용해 쿼리를 업데이트 해줌 (todolist add라 했을 때 스프레드 ) => 서버 응답이 오기 전에 UI를 미리 업데이트함 요청이 잘못될 시 => onError.. 2023. 5. 15. 이전 1 다음 728x90 반응형
