TanStack-Query는 비동기 데이터를 효율적으로 상태 관리 할 수 있도록 강력한 여러 기능을 제공하는 라이브러리다. 그 중 대표적인 훅 중 하나로 useQuery 가 있다. useQuery는 서버의 데이터를 조회하는 훅으로, GET 요청에 사용된다. 이번 글에서는 서버의 데이터를 추가, 삭제 등 조작하는 훅인 useMutation 에 대해서 알아본다.mutation의 사전적 정의는 변경, 변이이다. 따라서, useMutation 은 흔히 POST, DELETE, PUT 등 서버의 데이터를 변경하는 요청에 사용된다. 또한, 해당 훅을 이용하면 낙관적 업데이트를 손쉽게 구현할 수 있다. 직접 서버를 생성하고 todo 앱을 만들어 하나하나 살펴보자. 1️⃣ 프로젝트 생성전체 디렉토리 구조는 다음과 같다..

TanStack-Query 는 다양한 기능을 제공하며, 그 중 무한스크롤 기능도 제공한다. TanStack-Query에서 제공하는 useInfinityQuery 훅을 사용하면 쉽게 무한스크롤 기능을 구현할 수 있다.이번 글에서는 TanStack-Query를 이용하여 무한스크롤을 구현하는 과정을 정리해보겠다.  1️⃣ Mock Data외부 API나 서버를 사용하기 번거로우니 클라이언트 자체에서 Mock Data 를 만들어 사용하자.// mockData.jsconst mockData = Array.from({ length: 100 }, (_, i) => i + 1).map( (num) => `${num} 데이터입니다.`);export function fetchMockData(pageParam) { con..

대게, 프론트엔드에서 상태관리 하는 데이터를 두 가지로 구분할 수 있다.1. 일반 데이터특징:앱 내부에서 바로 생성되거나 사용되는 데이터.사용자 입력, UI 상태(모달 열림/닫힘, 탭 선택 등), 선택된 아이템 등.비교적 단순하며, 비동기 작업이 필요하지 않음.useState, useReducer 훅을 이용하여 상태 관리2. 비동기 데이터특징:외부 API, 데이터베이스 등에서 가져오거나 저장하는 데이터.일반적으로 서버와 통신해야 하므로 비동기 작업(Promise, async/await)이 필요함.단순할 경우 useEffect, fetch 를 통하여 상태 관리복잡하면 SWR, TanStack Query 등 라이브러리를 이용하여 상태 관리프론트엔드에서 외부 API를 사용하여 데이터를 받아오는 경우는 일반적이..

현대 프론트엔드 프레임워크를 대표하는 기술은 단연코 리액트일 것이다. 물론, 리액트는 공식적으로 라이브러리지만 사실상 프레임워크라 해도 어색하지 않다. 일부 시각에서는, 바닐라JS보다 리액트를 사용했을 때의 장점이 부분 렌더링이라고 한다. 전체를 리렌더링 하는 것이 아니라 상태가 변경된 컴포넌트만 리렌더링 하는 것이 장점이라 한다. 그런데 필자의 생각은 조금 다르다. 실제로, 바닐라JS도 얼마든지 변경된 부분만 리렌더링이 가능하기 때문이다. 즉, 일부분만 리렌더링 하는 것은 리액트의 장점이라고 말하기 어렵다고 생각한다. 그렇다면 리액트를 사용했을 때의 장점이 무엇일까 ? 바닐라JS는 컴포넌트 내부의 상태가 변경되면, 직접 코드로 DOM을 조작하고 렌더링해야 된다. 하지만, 리액트는 직접 DOM을 조작할 ..