tanstack query

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

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