react-query (3) 리액트 쿼리와 리액트 라우터 리액트쿼리, 리액트 라우터 함께 사용하여 데이터 가져오기import { useLoaderData } from 'react-router-dom';function HomePage () { const navigate = useNavigation(); const params = useParams(); //const data = useLoaderData(); // ⭐️ 위 loader() 함수에서 반환된 값을 사용하지 않고 useQuery를 계속 사용한다. // fetchQuery를 사용하면 react-query가 해당 요청을 보내고 응답 데이터를 캐시에 저장하게 되므로, useQuery에서는 캐시된 데이터를 사용하게 된다. // 다른 화면으로 나갔다가 다시.. react query로 데이터 전송하기- mutation, 쿼리 무효화 const { mutate, isPending, isError, error } = useMutation({ // mutationKey: 전송은 응답 데이터를 캐시 처리하지 않기 때문에 필수로 필요한 것은 아님 mutationFn: createNewEvent,})// 여기서 받아오는 mutate함수로 이 함수를 언제 실행할지 지정할 수 있다.Mutation을 사용하여 Post요청하기useQuery는 데이터를 가져올 때 사용useMutation는 데이터를 전송할 때 사용useMutation 사용법useMutation 사용const { mutate, isPending, isError, error } = useMutation({ // mutationKey: 전송은 응답 데이터를 캐시 처리하지 않기 때문에.. react query로 Get요청하기 - 캐시처리, 동적쿼리, 요청 취소, 비활성화 🧐 Tanstack Query란?http 요청을 전송하고 프론트엔드 UI를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리 Tanstack Query가 반드시 필요한건 아니고, useEffect와 fetch로 충분히 구현할 수 있다.하지만 Tanstack Query를 사용하면 훨씬 깔끔하고 수월하게 개발할 수 있다.또한, 캐싱처리나 refetch트리거 등 고급 기능을 이용할 수 있다.🔧 설치, 사용법, 이점설치npm install @tanstack/react-query사용법- tanstack query는 HTTP요청을 전송하는 로직이 내장되어 있지 않고, 요청을 관리하는 로직을 제공: 요청 데이터와 발생 가능한 오류를 추적하는 역할 등 - 모든 get요청에서 query key를 이용해 .. 이전 1 다음
