그럼에도 불구하고

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