리액트쿼리

백엔드로부터 데이터를 받아오기 위해 우리는 리액트 쿼리에서 제공하는 useQuery()라는 훅을 사용할 겁니다. 여기서 쿼리란 '문의하다, 질문하다'라는 뜻을 가지고 있는 단어인데요. 데이터베이스 같은 것에 우리가 필요한 데이터를 요청하는 것을 말합니다. 즉, useQ

✅ 리액트 쿼리에는 두 가지 status가 있다.1\. Query Status : 실제로 받아 온 data 값이 있는지 없는지를 나타내는 상태 값=> useQuery() 결괏값에서 status 값을 통해 확인할 수 있다.2\. fetch status: queryFn()

캐시란?데이터를 미리 복사해 놓는 임시 장소를 말하는데요. 보통 저장 공간의 크기는 작지만, 데이터를 가져오는 속도는 아주 빠르다는 특징이 있습니다. 따라서 자주 사용하는 데이터를 캐시에 저장해 두면, 해당 데이터를 훨씬 빠르게 가져와서 사용할 수 있습니다.웹 브라우저

서버의 데이터를 변경할 때 사용합니다.HTTP POST, PUT, DELETE 요청을 사용할 수 있습니다.mutationFn은 queryFn처럼 Promise를 리턴하는 비동기 함수입니다.파라미터를 전달받을 수 있습니다.mutationFn 파라미터는 useMutatio

기존에는 모든 포스트를 다 한 번에 불러왔지만 이번에는 세 개씩 끊어서 불러오고, 다음 페이지 버튼을 누르면 그다음 데이터를 세 개씩 받아 오도록 하려고 합니다.먼저 현재 포스트를 받아오는 API 함수를 page와 limit 값을 받도록 변경해 주겠습니다. 참고로 백엔

useQuery()에서는 data에 한 페이지에 해당하는 데이터만 담고 있었지만, useInfiniteQuery()에서는 data에 모든 페이지의 데이터가 pages라는 프로퍼티로 배열에 담겨 있습니다.✅ useInfiniteQuery() 훅에서는 page param

옵티미스틱 업데이트는 좋아요 기능과 같이 유저에게 빠른 피드백을 제공해야 하는 경우에 사용.간단히 말하자면 서버로부터의 리스폰스를 기다리지 않고 유저에게 바로 낙관적인 피드백을 주는 것.실제 뮤테이션 리퀘스트를 보내기 전에 기존의 캐시 데이터를 조작해서 새로운 데이터를