React Query

React Query가 무엇이고 왜 사용하는 걸까? 먼저 클라이언트 상태와 서버 상태의 차이점을 알아보자. > 클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보를 의미한다. 예를 들어 사용자는 테마를 밝은색이나 어두운색 배경으로 변경하거나, 언어를 선택할 수 있는데 이것은 서버에서 일어나는 일과는 아무 관련이 없다. 단순히 사용자의 상태를 추적...

React Query 시작하기 React Query를 사용하기 위해 우선 라이브러리를 설치한다. 쿼리 클라이언트를 생성한다. 쿼리 클라이언트는 쿼리와 서버의 데이터 캐시를 관리하는 클라이언트이다. 마지막으로 자녀 컴포넌트에 캐시와 클라이언트 구성을 제공할 QueryClientProvider를 적용한다. queryClient가 가지고 있는 캐시와 모든...

useQuery 실습 지난 실습에 이어서 이번에는 각 post의 comment를 받아오는 useQuery훅을 작성해보겠습니다. src/PostDetail.tsx comments를 잘 받아오지만 문제가 있다. 다른 게시글을 클릭해도 처음 받아온 comment를 보여준

React-Query V4로 업데이트 하기 리액트쿼리가 버전 업그레이드 되면서 @tanstack/react-query로 이름이 바뀌었다. 지금까지 사용하면서 느낀 기존 버전과 차이점은 devtools를 사용하려면 @tanstack/react-query-devtools

Mutation Mutation은 서버에 데이터를 업데이트 하도록 서버에 네트워크 호출을 실시한다 CRUD(Create, Read, Update, Delete)에서 useQuery가 C를 맡았다면, useMutation은 RUD를 담당한다 Mutation은 변경 내용

무한스크롤은 사용자가 스크롤 할 때마다 새로운 데이터를 가져오는 것을 말한다 이는 모든 데이터를 한 번에 가져오는 것보다 훨씬 효율적이다 리액트쿼리의 useInfiniteQuery 훅을 사용해서 구현해보자 useInfiniteQuery useInfiniteQuer