그럼에도 불구하고

React Query를 공부하다 보면 isLoading과 isFetching에 대해 그냥 지나칠 수 없는데 너무 헷갈려서 정리해보기로 했습니다. 🧑🏻‍💻 isLoading이 끝나지 않는 경우 button을 눌렀을 때 react query를 사용하여 비동기 방식으로 data를 가져올 건데, enabled:false 이면 isLoading이 계속 true인 문제가 발생했습니다. ( button을 누르기 전부터 isLoading 상태임 ) 즉, button을 눌렀다면 enabled: true 가 되어 해당 query의 isLoading이 true에서 false로 변경되고 UI가 보여야 하는 상황인데 보이지가 않았습니다. HTML 삽입 미리보기할 수 없는 소스 왜 계속 Loading 상태가 지속되는걸까... 우..

React Query에서 페이지네이션(Pagination)과 데이터 프리페칭(Prefetching)에 대해 알아보겠습니다. 🧑🏻‍💻 Pagination 예를 들어, 블로그의 게시글을 나열하는데 페이지 번호를 매겨서 나타낼 때가 있습니다. 이때 React Query의 Pagination을 사용하면 현재 페이지(current page) 상태를 통해, 현재 페이지를 파악할 수 있습니다. 📌 사용 예시 최대 페이지의 수는 10 const MAX_POST_PAGE = 10; 사용자가 다음, 또는 이전 페이지로 가는 버튼을 누르면 해당 페이지로 이동하며 currentPage의 상태를 업데이트합니다. React Query는 바뀐 쿼리 키를 감지하고 새로운 쿼리를 실행해서 새 페이지가 표시됩니다. 👉 전체 코드 HTM..

React Query를 TS에서 사용할 때 Type은 어떻게 지정해야 할지 알아보겠습니다. Start! 🧑🏻‍💻 React Query TypeScript React Query는 TypeScript의 제네릭(Generics)을 많이 사용합니다. 이는 라이브러리가 실제로 데이터를 가져오지 않고 API가 반환하는 데이터 유형을 알 수 없기 때문입니다. 공식 문서에서는 타입스크립트를 그다지 광범위하게 다루지 않고, useQuery를 호출할 때 기대하는 제네릭을 명시적으로 지정할 수 있게 알려줍니다. 📌 useQuery 현재 useQuery가 갖고 있는 제네릭은 4개이며, 다음과 같습니다. TQueryFnData: useQuery로 실행하는 query function의 실행 결과의 타입을 지정하는 제네릭 타입입니..

useInfiniteQuery와 Infinite Scroll에 대해 알아보겠습니다. 🧑🏻‍💻 useInfiniteQuery 기존 데이터를 모두 불러왔을 때, 더 많은 데이터를 아래에 불러오는 "무한 스크롤"은 매우 흔한 UI 패턴입니다. Tanstack Query는 이런 리스트형 데이터를 요청하기 위해, useQuery의 유용한 버전인 useInfiniteQuery를 지원합니다. 즉, useInfiniteQuery는 파라미터 값만 변경하여 동일한 useQuery를 무한정 호출할 때 사용합니다. useInfiniteQuery는 전반적으로 useQuery와 동일하지만, useInfiniteQuery와 useQuery의 차이를 비교하며 useInfiniteQuery의 기능을 살펴보겠습니다. 📌 반환 객체에서 ..

React Query에 대해 알아보겠습니다. 🧑🏻‍💻 React Query란? 공식문서에 따르면 React Query란 fetching, caching, 서버 데이터와의 동기화를 지원해 주는 라이브러리라고 합니다. React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. React Query는 우리에게 친숙한 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안한다고 합니다. - 카카오페이 React Query 설명 인용 또한 카카오페이 프론트엔드 개발자분들의 말을 더 빌려보자면, React Que..