무한 스크롤은 프론트엔드 개발자가 만나게 되는 몇가지 귀찮은 작업일 것이다. 그리고 나는 이번에 만나게 되었다. 환경은 Next.js & React-Query이다. 그렇다 React-Query를 사용하고 있다. 이 전부터 React-Query는 무한 스크롤을 쉽게 구현할 수 있게 제공해주는 것이 있는 걸로 알고있다. 그래서 이번에 해당 기능을 사용하려고 한다. useInfiniteQuery 무한 스크롤을 구현할 수 있게 도와주는 아주 강력한 Hook이다. const { data, fetchNextPage, hasNextPage, status, } = useInfiniteQuery( "list" , getList , { getNextPageParam: ({pagination:{ paginationCount..

들어가며. react-query를 몇번 사용했지만 타입스크립트와 함께 사용했을 때, 또는 쿼리를 가지고 오는 부분에서 불편함을 느끼고 있어서 이번에 정리해서 작성하려고 한다. useQuery const { data } = useQuery("todo", getTodoList); 가장 기본적인 사용방법이다. 첫 번째 매개변수는 Query Key가 들어가는데, 문자 혹은 배열로 넣을 수 있다. const todoList = useQuery("todoList", getTodoList); or const todoList = useQuery(["todoList", "1"], getTodoList); Key는 고유해야 하며, 추후 해당 키를 가지고 구분할 수 있다. 두 번째 매개변수로는 Promise를 반환하는 함수..

지금까지 React Query에 대해서 공부를 했었는데, redux devTools은 있는 것을 알았는데, React-Query DevTools이 있다는 것은 방금(글쓰기 전 ㅋ ) 알아서 지금 추가로 정리하려고 글을 작성한다. 기본적으로 Dev Tools은 React-Query에서 기본적으로 제공하기 때문에 추가적인 패키지를 설치할 필요가 없다. 또한 Development 모드에서만 작동하고, Production 모드, 즉 배포 상태에서 제외 시키는 작업은 안해도 된다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWeb..

앞서 겉핥기에서 React Query의 캐싱은 stale과 cacheTime을 통해 이루어 진다고 말했다. Stale 말 그대로 " 신선하지 않은 " 을 뜻한다. React Query에서는 캐싱된 데이터를 기본적으로 stale 상태로 여긴다. 여기서 말하는 신선하다는 것은 서버에서 조회한 데이터는 요청한 당시의 snapshot이고, 외부 요청으로 데이터가 변경된 경우 브라우저가 가진 데이터는 오래된 데이터가 되어버려서 stale하다고 하는 것이다. 그러므로 stale 상태란 뜻은 최신화가 필요하다는 것으로 refetch 상황에 refetch가 발생한다. refetch가 되는 조건으론 ▶ 새로운 Query Instance가 마운트 될 때 ( 페이지를 이동했다가 왔을 경우 ) ▶ 브라우저 화면을 이탈했다가 ..

이번에는 React-Query를 사용하면서 일어날 수 있는 상황을 직접 테스트하고, 해당 상황에 전역 상태 관리가 필요할지, 필요 없다면 어떤 방식으로 처리할 지 공부하려고 한다. 전역 상태 관리를 사용하는 목적 중 하나가 서버의 데이터 요청을 처리하고 그것을 전역으로 관리하는 목적이였다. 근데 이것을 React Query를 사용하면 조회했던 데이터는 useQueryClient 를 사용해서 같은 트리에 있는 컴포넌트로 사용할 수 있게 된다. 그렇게 되면 전역 컴포넌트를 사용하는 경우가 많이 줄어들지 않을까? 생각한다. 로그인 유지하기 유저 정보를 가져온 다음 mypage로 이동 후 유저 정보를 useQueryClient로 조회하고, 새로고침 시 어떻게 되는가? 일반적으로 유저 정보를 로그인 후 가져오고 ..

들어가며 지난번 React-Query에 대한 필요성을 간략하게 알아봤다. 이번에는 React-Query 자체에 대해서 정리를 해보려고 한다. React-Query ? 서버에서 값을 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 사용할 때 도움을 준다. 기존 Redux, Mobx, Recoil 같은 상태 관리 라이브러리가 있지만, 서버 데이터와 클라이언트 데이터를 분리시킬 수 있다는 장점이 있다. React-Query의 장점 ▶ 서버의 상태 업데이트, 데이터 패칭, 캐싱 등을 쉽게 할 수 있도록 도와준다. ▶ Redux 등, 전역 상태 관리를 통해서 서버의 데이터를 비동기로 가져오기 위해서는 추가적으로 작성해야하는 코드 많지만 React-Query는 간단하게 처리해준다. ▶ 코드가 간단해..