끄적끄적

이전포스팅에서는 useQuery에 대해서 간단하게 알아보았습니다. useQuery가 data를 get 해오고 렌더링 하는 것이 주 목적이었다면, useMutation은 data를 post하고 delete하는데 목적이 있다고 생각하면 될 것 같습니다. 가장 기본적인 형태로는 import { useMutation } from 'react-query'; const mutation = useMutation(updateDataFunction); // 폼 제출 또는 상호 작용 후 실행 mutation.mutate(dataToUpdate, { onSuccess: () => { // 성공 후 작업 수행 }, onError: (error) => { // 실패 후 작업 수행 }, }); // or const someMut..

이전 포스팅에서 React-Query란? 에 대해서 간단하게 알아봤습니다. 그래서 오늘은 안쓸 이유가 없는 React-Query의 찐!기초 사용법을 알아보려고 합니다. 우선 라이브러리를 설치해 줍니다. npm i react-query 다른 파일들은 생성하지 않을꺼고 App.tsx에 간단하게 작성해보려고 합니다. 여기에서 사용할 Test API는 fake api 인 https://jsonplaceholder.typicode.com/guide/ 사이트를 참고합니다. import React from 'react'; import { QueryClient, QueryClientProvider, useQuery } from "react-query"; const queryClient = new QueryClient(..

요즘 기술 스택들을 보면 React-query를 쓰는 걸 참 많이 보는 것 같다. 그래서 React-Query가 뭔지 봤더니 더보기 Server Data 와의 동기화, 캐싱, 업데이트 등을 쉽게 다룰 수 있는 라이브러리이다. 먼저 왜 쓰는지 부터 알아보자. ● 캐싱 Caching 반복적인 데이터 호출을 방지하고, 불필요한 API콜을 하지 않아 준어 어플리케이션 속도에 긍정적이다. ● 서버 데이터 ↔ 클라이언트 데이터 분리 프로젝트의 규모에 따라 다르겠지만 어느정도 규모가 생기다보면 무자게 많은 데이터,상태 관리를 해야 하는데 서버에서 받아서 사용하는 data와 ui 관리하는 data 등 많은 데이터가 실제로 동시에 관리되고 혼잡스러워진다. 사실 이부분이 나에게 있어 가장 react-query를 사용해보고..