Today Hailie Learned

useQuery와의 차이점1. 반환 객체에서 반환되는 데이터 속성의 구조와 형태 (pages, pageParams)useQuery를 사용하면 쿼리 함수에서 데이터가 data 속성에 담겨 반환되지만, useInfiniteQuery 에서는 반환되는 객체가 data와 pages라는 두 가지 속성을 포함한다. pages는 각 데이터 페이지를 나타내는 객체의 배열이다. 따라서 pages 배열의 각 요소는 useQuery를 사용했을 때 각각의 쿼리에서 받을 수 있는 데이터에 해당한다.   pageParams (페이지 매개변수)도 있는데, 이는 각 페이지마나 사용하는 파라미터를 기록한다. (잘 사용되지는 않는다.)  그래서 각 쿼리는 pages 배열의 자신만의 요소를 가지고 있고, 그 요소는 해당 쿼리의 데이터를 나..

tanstack query를 사용해서 데이터 패칭을 하는데 페이지네이션을 구현할 때, 다음 페이지로 이동을 할때마다 로딩 화면이 살짝 보이는 것을 개선하기 위해서는 prefetching 을 사용하면 된다.  prefetching을 사용하면 말 그대로 데이터를 미리 가져와서 캐시에 넣고 사용자가 로딩 화면을 보지 않도록 할 수 있다.   prefetchQuery는 QueryClient 의 메소드이고, useQueryClient 훅을 써서 그 QueryClient를 가져올 수 있다.  상태 업데이트가 비동기적이라 업데이트가 이미 적용되었는지 정확하게 알 수 없기 때문에 다음 페이지 버튼의 클릭 이벤트에서 prefetching이 실행되도록 하지 않는게 좋다. 그래서 현재 페이지가 변경될 때마다 useEffec..