Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

tanstack query/react query 2

Tanstack Query/React Query 2탄: useMutate와 queryClient 사용하기(feat. 낙관적 업데이트)

이전에 useQuery의 구조를 살펴보는 글을 작성했습니다. 이번에 소개할 useMutate는 useQuery와는 달리 서버의 데이터를 변경할 때 사용하는 것이 더 적합합니다. useQuery는 ('enabled' 옵션을 사용하지 않은한) 컴포넌트가 새로 렌더링될 때마다 데이터를 요청하는 특징이 있습니다. 이 때문에 주로 데이터의 조회에 사용합니다. 하지만 useMutation은 요청을 보내는 Mutate라는 함수를 반환하기 때문에 개발자가 원하는 때에 서버에 요청을 보낼 수 있습니다. 따라서 일반적으로 POST, PUT, DELETE 등 서버의 데이터를 업데이트하는 요청을 보낼 때 useMutate를 사용합니다.useMutation은 데이터 변경 요청을 관리하고 요청 상태 및 결과를 제공합니다. 데이터..

개발/JavaScript 2024.03.03

Tanstack Query/React Query 1탄: 기본 사용법과 useQuery

Tanstack Query는 데이터 페칭을 위한 라이브러리입니다. Tanstack Query를 이용하면 서버 상태의 관리 및  자동 재시도, 로딩 상태 관리, HTTP 요청 에러 처리, 리페칭 및 자동 데이터 업데이트 시점 설정 그리고 키를 통한 캐시 관리까지 쿼리와 관련된 모든 것을 아주 쉽게 처리할 수 있습니다. 참고로 버전 3까지는 React Query라는 이름이었으나, React 외에도 Vue, Svelte 등에서도 사용이 가능하도록 확장하면서 Tanstack Query로 이름이 바뀌었다고 합니다.Tanstack Query 설치Tanstack Query는 React 16.8+ 부터 사용이 가능합니다. devtools도 같이 설치해보겠습니다.npm install @tanstack/react-quer..

개발/JavaScript 2024.02.25