낙관적 업데이트란?
낙관적 업데이트(Optimistic Update)는 사용자 경험(UX)을 향상시키기 위해 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 기법입니다.
서버 지연으로 인한 UX 저하를 방지하고 빠르고 높은 인터페이스를 제공합니다.
주로 좋아요, 장바구니 담기 같이 지연이 UX에 영향을 미치지만 실패가 치명적이지 않은 경우에 낙관적 업데이트를 사용합니다.
낙관적 업데이트는 실패 처리가 필수입니다.
구현 방식
프레임워크/라이브러리
-
React + Redux/RTK Query
상태 관리에서 낙관적 업데이트 지원.
예: RTK Query의 useMutation에 optimisticUpdate 설정. -
React Query
useMutation으로 낙관적 업데이트 구현.
예: onMutate로 UI 업데이트, onError로 롤백. -
SWR
mutate 함수로 로컬 데이터 즉시 변경.
예시 코드
React Query의 useMutation을 사용합니다. onMutate에서 UI를 즉시 업데이트하고, onError로 실패 시 롤백, onSettled로 캐시를 갱신합니다.
import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';
const LikeButton = ({ postId, likes }) => {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: () => axios.post(`/api/likes/${postId}`),
onMutate: async () => {
// 낙관적 업데이트: 좋아요 수 즉시 증가
await queryClient.cancelQueries(['post', postId]);
const previousPost = queryClient.getQueryData(['post', postId]);
queryClient.setQueryData(['post', postId], (old) => ({
...old,
likes: old.likes + 1,
}));
return { previousPost }; // 롤백용 이전 데이터 저장
},
onError: (err, variables, context) => {
// 실패 시 롤백
queryClient.setQueryData(['post', postId], context.previousPost);
alert('좋아요 실패!');
},
onSettled: () => {
// 성공/실패 후 캐시 갱신
queryClient.invalidateQueries(['post', postId]);
},
});
return (
<button onClick={() => mutation.mutate()}>
좋아요 ({likes})
</button>
);
};장점과 단점
장점
- 빠른 UX: 서버 지연 없이 즉각적인 피드백 제공.
- 사용자 만족도: 반응성 높은 인터페이스로 만족도 증가.
- 간단한 구현: React Query, RTK Query 등으로 쉽게 구현 가능.
단점
- 실패 처리 필요: 실패 시 에러 메시지 또는 롤백 필수.
- 부적합 사례: 결제, 주문 등 비즈니스에 치명적인 동작에는 부적합.
- 복잡성 증가: 롤백 로직이나 에러 핸들링 추가 필요.
