# useMutation

[항해 실전 프로젝트][React] useMutation을 이용하여 로딩페이지 보여주기
유저가 이미지를 업로드할 때 이미지가 서버에 전송되고 실제 화면에 표시되기까지 약간의 시간이 걸린다. 유저의 사용성 개선을 위해 이 대기 시간 동안 로딩페이지를 보여주려고 한다.여기에서 useMutation 훅을 사용하여 isLoading이 true인 동안 로딩페이지를

TIL 2023.07.07
오늘 공부 계획 및 공부한 내용📝 리액트 심화 강의 복습 ㅇ useMutation 사용해 데이터 CUD(추가, 수정, 삭제) 구현하기 ㅇ > useMutation : React Query 라이브러리에서 제공하는 훅으로, 변이(데이터 추가, 수정, 삭제)를 수행하고 그 결과 처리함. 사용하는 방법: 1) import { useMutation } fro...

infiniteScroll 오류 해결 + useMutation과 친해지기
하하 새벽4시까지 6시간을 인피니티 스크롤 오류고치는데 소모했다 그런데 작성한 코드 단 3줄,, 해결했을 때는 재밌고 기분이 좋았지만6시간짜리 커밋을 날리고 내역을 확인한 순간 현타가 몰려왔다 그래도 해결했으니까..서버에 등록된상품 개수는 총 28개, 한번에 받아오는
React-Query
TanStack Query 1. Motivation 기존의 많이 쓰이던 상태관리 라이브러리는 클라이언트 상태를 작업하기에는 좋으나 async나 서버 상태 작업에 최적화되어있지는 않다. 그 이유는 서버상태는 완전히 그 개념이 다르기 때문이다 > #### server

아직도 React-Query를 안쓴다고??
두 번째 글이다.암튼, 프로젝트를 하면서 React-Query를 사용하여 개발하게 되었다.처음에 React-Query를 사용할 때는 이해가 잘 되지 않았지만 계속 쓰다보니 더 이상 React-Query 없이는 살 수 없는 몸이 되버렸다.그래서 React-Query를 쓰

react-query를 써보자..
React Query는 React 애플리케이션에서 데이터를 가져오고 관리하는 라이브러리이다. 이를 사용하면 API 호출을 간단하게 처리할 수 있고, 캐싱과 자동 업데이트 기능을 통해 데이터를 더 효율적으로 관리할 수 있다..

useMutation in apollo Client
apollo Client의 useMutation 훅은 DB의 Data를 mutate하기 위하여 사용하는 Hook이다. 이런저런 방황끝에 알아낸 사용방법을 정리해본다.반박시 당신말이 맞다.사용순서는 크게 3단계로 구분된다. mutate하기 위한 쿼리 작성 가장 바깥의 m
[React] useState + useEffect 대신 useMutation 사용하기: Create, Detail read, Update, Delete
useQuery는 get할때 사용하는 메서드였다.create했을때 리스트가 업데이트되지않아서 당황했음.refresh를 삭제해서 그런거겠지만... 리액트쿼리에 이부분을 위한 메서드가 있을거라고 생각했다.찾아보니 useMutation이라는 것을 사용해서 CUD를 하고, 여

React | React Query
UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다.즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. #2. 상태란? 주어

[React Query] useMutation의 필요성
전의 포스팅처럼 useQuery를 이용해 서버 데이터를 가져오고 장바구니에서 해당 상품을 추가하고 삭제하는 함수를 만들어 적용해보았는데 실시간으로 UI가 업데이트가 되지 않는 문제점이 발생했습니다.

react query useMutation으로 FormData 요청 보내기
프로젝트 진행중 이미지를 서버로 업로드하기 위해 formdata를 전송해야 하는 상황이었다.
Login, CreateAccount, useMe
지금까지의 설명을 바탕으로 login, createAccount를 완성한다.그리고 어느page에서든지 사용될 useMe 함수를 hook에 만들어 놓는다.localstorage에 token을 담기 위해서 key를 하나 만든다.

[React-Query] 리액트 쿼리 기본 개념 staleTime, cacheTime, useQuery, useMutation
react-query웹 브라우저 세션과 관련된 모든 정보ex) 언어 선택, 다크모드 등과 같이 서버에 일과 관련X서버에 저장되지만 클라이언트에 표시하는데 필요한 데이터ex) 블로그 게시글기능서버 데이터 캐시를 관리서버 데이터 필요시 fetch, axios가 아닌 Rea

[TIL] useMutation | React-Redux | 에러 해결
useQuery : 데이터를 GET(조회)할 때 사용페이지가 로드될 때, 바로 실행!get 메소드처럼 단순히 조회만 할 때useMutation : 데이터를 create, update, delete (수정)할 때 사용post, patch 메소드처럼 데이터 수정이 있을 때
useMutation, formSubmission, withHandler
\*\*들어가기useMutation: client가 backend와 통신하기 위해 필요한 공통적으로거쳐야 하는 과정을 담아놓음. POST로 통신할떄,GET으로 통신할떄는 useSWR을 사용.withHandler: backend의 api들을 코딩하는 과정에서 공통적으로
UploadForm.js
들어가기select Photo, take Photo한 사진을 props로 받아서caption과 함꼐 uploadPhoto Mutation을 실행하여,사진을 DB에 저장하고, 뿌리는 screen역시, file(picture, video)등을 다루는 부분은 어려우니 집중할
follow, unfollow (1)
들어가기front부분에서 user를 follow, unfollow하는 부분,일단은 cache부분은 생략하고 useMuataion, useQuery 부분만 마무리 한다.Profile에서 follow, unFollow할 수 있게 구성한다.\-styled부분에 대한 설명은