August 5, 2025

🎣 지나친 낙관적 업데이트 (Optimistic Updates) 맹신: UI 불일치와 데이터 무결성 훼손

React

JavaScript

에러처리

비동기처리

상태관리

Summary

낙관적 업데이트는 사용자 경험을 향상시키지만, 네트워크 에러 처리 미흡 시 UI 불일치와 데이터 손실을 초래합니다. 에러 핸들링, 롤백 기능, 서버 상태 동기화를 통해 데이터 무결성을 보장해야 합니다.

Why Wrong?

낙관적 업데이트는 사용자 경험을 개선하기 위해 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 방식입니다. 하지만 네트워크 불안정이나 서버 에러로 인해 실제 업데이트가 실패할 경우, UI는 잘못된 상태를 보여주게 됩니다. 이러한 상황을 제대로 처리하지 못하면 데이터 불일치, 사용자 혼란, 심지어 데이터 손실까지 발생할 수 있습니다. 낙관적 업데이트는 네트워크 요청이 실패할 가능성을 간과하고, 에러 핸들링 로직 없이 무분별하게 사용될 때 큰 문제를 야기합니다.

How to Fix?

낙관적 업데이트를 적용할 때는 반드시 에러 핸들링 로직을 포함해야 합니다. 네트워크 요청 실패 시 UI를 이전 상태로 되돌리고, 사용자에게 적절한 피드백(예: 에러 메시지)을 제공해야 합니다. 또한, 데이터의 최종 상태는 서버에서 검증하고 클라이언트에 반영해야 데이터 무결성을 유지할 수 있습니다. 롤백 기능, 재시도 로직, 그리고 서버와의 상태 동기화 메커니즘을 구현하여 낙관적 업데이트의 위험을 최소화해야 합니다.

Before Code (Bad)

// 낙관적 업데이트 적용 (에러 처리 없음)
import React, { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);

  const handleLike = async () => {
    setLikes(likes + 1); // 즉시 UI 업데이트 (낙관적 업데이트)
    try {
      await fetch('/api/like', { method: 'POST' });
      // 서버 요청 성공 시 아무런 동작 없음
    } catch (error) {
      // 에러 발생 시 아무런 동작 없음 (문제!)
      console.error('Like request failed:', error);
    }
  };

  return (
    <button onClick={handleLike}>
      Like ({likes})
    </button>
  );
}

export default LikeButton;

After Code (Good)

// 낙관적 업데이트 적용 (에러 처리 포함)
import React, { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);
  const [isLiking, setIsLiking] = useState(false);

  const handleLike = async () => {
    if (isLiking) return;

    setIsLiking(true);
    const previousLikes = likes;
    setLikes(likes + 1); // 즉시 UI 업데이트 (낙관적 업데이트)

    try {
      await fetch('/api/like', { method: 'POST' });
      setIsLiking(false);
    } catch (error) {
      console.error('Like request failed:', error);
      setLikes(previousLikes); // UI 롤백
      setIsLiking(false);
      alert('Like failed. Please try again.'); // 사용자에게 알림
    }
  };

  return (
    <button onClick={handleLike} disabled={isLiking}>
      Like ({likes})
    </button>
  );
}

export default LikeButton;