# optimistic update

hamham

🧹 개요 투두리스트의 CRUD 기능을 Firebase와 연동하다가, 투두 수정 부분에서 문제가 있었고 이를 해결하기 위해 optimistic update를 적용한 내용을 포스팅해보려고 한다. 💥 문제 상황 원래는 투두를 수정하고 완료 버튼을 누르면 바로 수정 후의 내용이 반영되어야 한다. 하지만 아래처럼 수정 전의 내용이 잠깐 나타난 후에야 수정 후의 내용이 반영이 되는 문제가 생겼다. 🔎 가정 새로운 데이터가 도착하기 전에 화면을 그려줘야 해서 이전 데이터를 보여줬을 것이다 코드의 어느 부분이 저렇게 수정 전의 내용을 잠깐 보여주는 건지 궁금했다. 그래서 일단 코드를 분석해보기로 했다. 먼저, handleTodoEdit 코드를 두 부분으로 나눠보았다.

zzi99

기존 방법 이번에 코드리뷰 사이트에서 좋아요 기능을 구현해보았다. 기존에 구현한 방법은 likeQuestion api가 성공하면 다시 question api를 불러 빈하트 -> 꽉찬 하트 (좋아요가 된 이미지)를 보여주는 방식이었다. 아래의 gif들은 네트워크 속도를 점점 느리게 조절해보았다. 그 결과 네트워크가 느릴 수록 서버로부터 응답을 받기 전까지 아무런 반응이 없어 사용자 경험에 좋지 않은 것을 볼 수 있다. ![](https://velog.velcdn.com/images/zzi99/post/a5233e10-1243-

cloud_oort

Mutation(변이) React-Query에서 mutation의 역할은 서버에 있는 데이터를 업데이트하기 위해 서버로 네트워크 콜을 보내는 것이다. 즉 Create, Update, Delete할 때 쓰인다. 우리는 mutaion을 활용하기 위해 useMutation hook을 사용할 것이다. > CRUD의 사용방법은 다음과 같다. **Read: useQuery Create, Update, Delete: useMutation ** useMutation useMutation은 몇 가지 빼고는 useQuery와 비슷하다. 실제 네트워크 콜 할 때, 사용할 mutate function을 리턴 우리는 useMutation 리턴 오브젝트 값의 mutate function property를 이용하여 mutation call을 전달할 것이다. cache에 데이터를 저장하는 것이 아니기 떄문에 query key는 불필요하다. cache data가 없

jhjung3

SNS의 "좋아요" 페이스북이나 인스타그램에서 "좋아요" 기능을 사용해본 경험이 있으신가요? 좋아요 버튼을 클릭하면, 클릭과 동시에 해당 피드에 내 좋아요가 반영되는 모습을 확인할 수 있습니다. 좋아요 기능은 서버에 side effect를 발생시키는 PUT 요청을 보내고 그 응답을 받아오기까지 딜레이가 생기는 기능입니다. 하지만 좋아요 기능이 동작하는 모습을 보고 있으면, 클릭과 동시에 동기적으로 응답을 받아오는 것처럼 보이죠. Optimistic Updates 개념 이와 같이 서버에 side effect를 발생시키는 요청에 대해, 요청을 보내는 것과 동시에 결과를 예측하고, 예측한 결과를 UI에 반영하는 것을 Optimistic Updates라고 합니다. ![](https://velog

sssssssssy

서두 sns나 이커머스에서 많이 사용되는 좋아요 기능! 이 기능을 구현하면서 optimistic update 라는걸 처음 알게 되었다. 서버 상태관리로 react-query를 사용하고 있기에 리액트쿼리 라이브러리를 이용해 어떻게 구현하는지와 옵티미스틱 업데이트가 왜 필요한지에 대해 알아보았다. optimistic update (낙관적 업데이트) 사용자 인터페이스에서 발생하는 작업을 즉시 반영하여 사용자에게 빠른 피드백을 제공하는 기술이다. 사용자 동작을 먼저 반영하고, 통신이 완료되지 않은 상태에서도 해당 변경사항을 즉시 화면에 업데이트해준다. 🤔 왜 필요할까 ? 좋아요 버튼을 클릭하면 일반적으로 서버와의 통신을 통해 데이터를 업데이트하고 응답을 기다린다. 좋아요 기능같은 경우에는 유저가 좋아요를 눌렀다고 인지할 수 있는 빠른 인터랙션이 필요하기때문에, 실제로 서버와 데이터를 주고 받기전에 서버와의 통신을 기다리지 않

mskwon

요즘 리액트 생태계에서 react-query, swr 같은 라이브러리를 활용해서 클라이언트-서버 상태 동기화, 상태관리를 하는 추세인 것 같다. npm trends만 봐도 그렇다. npmtrendsreactqueryswr 나도 이 친구들을 회사에서도 개인적으로도 사용하고 있는데, 데이터의 optimistic update를 구현하는 과정에서 약간의 이슈가 발생했던 상황이 있었다. optimistic update가 뭔지에 대한 설명은 stack overflow의 답변으로 대체한다.. ㅎ > In an optimistic upd

euneun

서론 인스타에서 좋아요를 누를 때와 같이, 서버에 반영되기도전에 사용자에게 이미 반영되어있는것처럼 보이게 할 수 있는 동작을 구현할때 쓰이는 optimistic update의 사용법에 대해서 정리해보려고 한다 Optimistic update 리액트 쿼리에서는 이 기능을 optimistic update라고 하는데 한국어로 직역하면 낙관적 업데이트(?)라는 말이되어서 와닿지가 않는다. '어차피 나중에 디비에 반영될거 우선 낙관적으로, 긍정적으로 서버 요청이 성공한다고 가정하고 하트부터 칠해놓고 보자~' 이런느낌으로 해석하면 될 것 같다. (만약 서버오류시 다시 롤백) 사용법 위의 공식문서의 코드를 보면 이해가 갈텐데, react-query의 useMutation을 쓸때 onMutate이라는 option에서

younoah

낙관적인 업데이트 투두리스트 앱같이 폼을 입력하고 데이터 요청으로 서버에 폼데이터를 저장하고 다시 불러오는 과정으로 동작할 때 네트워크 요청이 오래걸린다면 사용자 입장에서는 입력이 된건가? 하고 몇번이고 폼 입력하고 요청을 할 수 도있다. 낙관적인 업데이트는 서버요청이 무조건 성공한다는 가정하게 폼에서 입력한 정보를 즉시 바로 렌더링해주고 서버요청으로 보내는식으로 진행한다. 페이스북에서 커멘트 작성할 때 이 기법을 사용한다고 한다.

sv002

optimistic update란 낙관적 업데이트로 서버업데이트시 UI에서도 어차피 업데이트 할것이란 (낙관적인) 가정으로 미리 UI를 업데이트 시켜주고 서버를 통해 검증을 받고 업데이트 Or 롤백하는 방식이다. react-query를 쓰면서 장점이라 느낀 것 중 하나