optimistic update(낙관적 갱신)란 무엇이며 어떻게 안전하게 구현하나요?

Question

Accepted Answer

**Optimistic update(낙관적 갱신)**는 응답을 기다리지 않고 서버 요청이 성공할 것이라고 *가정하여* UI를 **즉시** 갱신합니다. 이는 앱을 즉각적으로 느껴지게 만듭니다 — 하지만 요청이 실제로 실패하는 경우 **롤백**으로 처리해야 합니다.

## 대조

```text
비관적(일반): 클릭 → 스피너 표시 → 서버 대기 → 그 후 UI 갱신(느리게 느껴짐)
낙관적:       클릭 → UI를 즉시 갱신 → 요청 전송 →
              실패하면 변경을 롤백(즉각적으로 느껴짐)
```

## UX에 중요한 이유

신뢰도가 높은 동작(게시물 좋아요, todo 토글, 채팅 메시지 전송)의 경우 요청이 거의 항상 성공하므로, 왕복을 기다리는 것은 체감 지연만 더할 뿐입니다. 낙관적 갱신은 이런 동작을 즉각적으로 느껴지게 합니다.

## 안전하게 구현하기(롤백이 핵심)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. 롤백용으로 이전 state를 스냅샷
  setPost({ ...post, liked: !post.liked });    // 2. UI를 낙관적으로 갱신

try {
    await api.toggleLike(post.id);             // 3. 요청 발사
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. 실패 시 롤백
    showError("갱신할 수 없습니다 — 다시 시도해 주세요"); // 5. 사용자에게 알림
  }
}
```

안전의 핵심: **낙관적 변경 전에 이전 state를 스냅샷**하고, 요청이 실패하면 복원하세요. 롤백을 건너뛰면 UI가 서버 state에 대해 거짓말을 하게 됩니다 — 낙관적 갱신이 도입할 수 있는 위험한 버그입니다.

## React Query로(내장 지원)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // 스냅샷
    queryClient.setQueryData(["post"], newData);          // 낙관적 갱신
    return { previous };                                   // 스냅샷을 onError로 전달
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // 롤백
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // 서버와 조정
});
```

React Query는 패턴을 형식화합니다: `onMutate`(스냅샷 + 낙관적 갱신), `onError`(롤백), `onSettled`(진실을 확인하기 위한 refetch).

## 언제 쓰고 / 피할까

```text
✓ 사용: 성공 확률 높고 위험이 낮은 동작(좋아요, 토글, 재정렬, 채팅)
✗ 피함: 중요하거나 불확실한 작업(결제, 되돌릴 수 없는 동작) — 확인을 기다림
```

## 왜 중요한가

낙관적 갱신은 네트워크를 기다리지 않음으로써 앱을 즉각적으로 느껴지게 하는 강력한 UX 기법입니다 — 하지만 롤백(스냅샷 후 복원)을 구현하고 에러를 드러낼 때만 *안전*합니다.

그 패턴(스냅샷 → 갱신 → 실패 시 롤백 → 조정)은 필수 지식이며, 언제 적절한지(성공 가능성 높고 위험 낮은 동작) 대 위험한지(결제)를 이해하는 것이 세련되고 신뢰할 수 있는 UI와 서버 state를 조용히 왜곡하는 UI를 가르는 차이입니다.