낙관적 업데이트

서버 응답을 기다리지 않고 UI를 먼저 업데이트한 뒤, 실패 시 롤백하는 클라이언트 측 기법입니다.

동작 흐름

  1. 사용자 액션 발생 (예: 좋아요 클릭)
  2. 서버 응답 전에 UI를 즉시 변경 (좋아요 +1 표시)
  3. 서버에 요청 전송
  4. 성공 → 그대로 유지 / 실패 → 이전 상태로 롤백

왜 사용하는가?

낙관적 vs 비관적 업데이트

항목낙관적 (Optimistic)비관적 (Pessimistic)
UI 반영 시점요청 즉시서버 응답 후
체감 속도빠름느림
실패 처리롤백 필요별도 롤백 불필요
적합한 경우성공률 높은 단순 작업결제 등 실패 가능성 높은 작업

대표 사용 사례

간단 예시 (React + React Query)

const likeMutation = useMutation(addLike, {
  onMutate: async (postId) => {
    // 1. 이전 상태 백업
    const previous = queryClient.getQueryData(['post', postId]);
    // 2. UI 즉시 업데이트
    queryClient.setQueryData(['post', postId], old => ({
      ...old, likes: old.likes + 1
    }));
    return { previous };
  },
  onError: (err, postId, context) => {
    // 3. 실패 시 롤백
    queryClient.setQueryData(['post', postId], context.previous);
  },
});

주의사항

CSLOG에서 보기