낙관적 업데이트

Optimistic Update

개념

사용자가 UI에서 어떤 행동을 했을 때, 서버 응답을 기다리지 않고 즉시 화면에 반영하는 방식
서버 요청이 성공할 것이라고 낙관(optimistic)적으로 가정하고 UI를 미리 업데이트

예시:
SNS에서 좋아요 버튼 클릭 → 서버 요청 완료 전이라도 버튼이 눌린 상태로 표시
채팅 앱에서 메시지 전송 → 서버 확인 전이라도 채팅창에 메시지 표시

장점

• 사용자 경험(UX) 향상
• 서버 응답 대기 시간 없이 즉시 피드백 제공 → 앱이 빠르게 느껴짐
• 인터랙션 자연스러움
• 앱이 지연 없이 반응 → 사용자가 기다리는 느낌 최소화
• 실시간성 강조
• 채팅, 투표, 쇼핑 등 빠른 반응이 중요한 기능에서 유용

단점

• 서버 요청 실패 처리 필요
• 낙관적으로 UI를 먼저 바꿨으니, 서버에서 오류가 나면 UI를 롤백(rollback) 해야 함
• 데이터 불일치 위험
• 여러 클라이언트가 동시에 같은 데이터를 바꾸면 충돌 발생 가능
• 복잡성 증가
• 실패 시 롤백, 충돌 해결 로직을 추가해야 해서 코드가 복잡해질 수 있음

구현 전략

UI 우선 업데이트

// 예: React에서 좋아요 버튼
const handleLike = () => {
  setLiked(true); // 낙관적 업데이트: UI 먼저
  api.likePost(postId).catch(() => setLiked(false)); // 실패 시 롤백
};

롤백 전략
서버 오류 시 원래 상태로 되돌림
낙관적 키(Key) 관리
클라이언트에서 임시 ID 부여 → 서버에서 확정 ID 받으면 교체

낙관적 업데이트 vs 정상 업데이트

구분	정상 업데이트(Pessimistic)	낙관적 업데이트(Optimistic)
UI 반영 시점	서버 응답 후	서버 응답 전
UX	느림, 기다림 존재	빠름, 즉시 반영
오류 처리	간단	롤백 필요
예시	게시글 등록 후 화면 반영	게시글 등록 버튼 누르자마자 화면 반영

언제 사용하면 좋을까?

서버 응답이 느린 경우
사용자 경험이 즉각적 피드백이 중요한 경우
충돌 가능성이 낮은 단일 행동 처리 시

정리

낙관적 업데이트는 UX를 눈에 띄게 개선하지만, 서버와 클라이언트 상태 관리가 까다로움
개인적으로는 좋아요, 즐겨찾기, 장바구니 등 즉각적 반응이 필요한 기능에 적합하다고 생각됨
실시간 협업 툴에서는 낙관적 업데이트 + 충돌 해결 전략을 잘 섞어야 안정적