낙관적 업데이트 (Optimistic Update)란?

말그대로 서버통신이 성공할 것이라고 가정하고(낙관적으로) 데이터를 업데이트하는 것입니다.

• Optimistic Update(낙관적 업데이트) = 미리 UI를 업데이트

  서버 업데이트 시 UI에서도 똑같이 업데이트할 것이고 성공할 것이라는 (낙관적인)가정을 합니다.

• 페이스북의 좋아요 버튼을 예로 들면

  1. 일단 클라이언트 측 상태를 먼저 업데이트 (서버통신을 기다릴 필요 없음)
  2. 만약에 실패한다면, 과거 상태로 돌아가고 성공하면 최신데이터를 그대로 반영

• 데스크탑에선 문제가 없지만 인터넷 속도나 서버통신이 느릴 때도 사용자가 활동하는 행동을 제약없이 바로 업데이트되는 것처럼 보이기 때문에 사용자 환경(UX) 측면에서 유용합니다.

React query는 두가지의 낙관적 업데이트 방법을 제시합니다.

1. onMutate 옵션으로 캐시를 직접 업데이트 하거나
2. useMutation 결과에서 반환된 변수(variables)를 활용하여 UI를 업데이트할 수 있습니다.

한 곳에서만 낙관적 업데이트를 사용한다면 2번 방법으로 UI에 직접 접근하는 것이 더 적은 양의 코드와 일반적으로 쉬운 방법입니다.

하지만 다양한 장소에서 해당 변화를 알아야한다면 캐시를 업데이트하는 1번 방법을 추천하고 있습니다.

저희 서비스에서 좋아요는 글상세페이지 뿐만 아니라, 글모임 페이지, 어드민 페이지에서도 해당 변화를 알아야하기 때문에 1번의 방법을 선택했습니다.

onMutate:

(variables: TVariables) => Promise<TContext | void> | TContext | void

이 함수는 mutation 함수가 실행되기 전에 호출되며, mutation 함수가 받는 것과 동일한 variables가 전달됩니다. 이 함수는 mutation이 성공할 것이라고 기대하며 리소스에 대해 낙관적 업데이트를 수행하는 데 유용합니다.