⚡ React에서 낙관적 업데이트(Optimistic Update) 구현하기

---

🧠 낙관적 업데이트란?

낙관적 업데이트는 서버 응답을 기다리지 않고,
요청이 성공할 거라고 가정하고 UI를 먼저 업데이트하는 방식이다.

즉, 사용자가 어떤 액션을 했을 때, 바로 화면이 바뀌고 이후 서버에 요청을 보낸다. 성공하면 그대로 유지하고, 실패하면 롤백하는 전략이다.

---

🙋‍♀️ 왜 사용해야 할까?

• 빠른 사용자 피드백
• 느린 네트워크에서도 부드러운 UX
• 소셜 미디어, 댓글, 좋아요, 장바구니 등에 자주 사용됨

---

💡 기본 구현 흐름

1. UI 상태 업데이트 (서버 응답을 기다리지 않음)
2. 서버에 요청을 보냄
3. 성공 → 그대로 유지
4. 실패 → 이전 상태로 롤백

---

📦 예제: 게시글 좋아요 버튼

export const useBook = (bookId: string | undefined) => {
  const [book, setBook] = useState<BookDetail | null>(null);
  const { isloggedIn } = useAuthStore();
  const showAlert = useAlert();

  const likeToggle = () => {
    if (!isloggedIn) {
      showAlert('로그인이 필요합니다.');
      return;
    }

    if (!book) return;

    if (book.liked) {
      // 🔄 낙관적으로 상태 업데이트
      setBook({
        ...book,
        liked: false,
        likes: book.likes - 1,
      });

      // 📡 서버 요청
      unLikeBook(book.id).catch(() => {
        // ❌ 실패 시 롤백 처리 필요 (현재는 생략되어 있음)
      });

    } else {
      setBook({
        ...book,
        liked: true,
        likes: book.likes + 1,
      });

      likeBook(book.id).catch(() => {
        // ❌ 실패 시 롤백 처리 필요
      });
    }
  };

  useEffect(() => {
    if (!bookId) return;

    fetchBook(bookId).then(setBook);
  }, [bookId]);

  return { book, likeToggle };
};

---

## 🛠️ Tip: 캐시 라이브러리와 함께 쓰기

`React Query`나 `SWR` 같은 캐시 라이브러리를 사용하면 더 간편하게 구현할 수 있다.

### 예: React Query에서의 낙관적 업데이트

```tsx
const queryClient = useQueryClient();

const mutation = useMutation(updateTodo, {
  // 1. 낙관적 업데이트
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries(['todo', newTodo.id]);

    const previousTodo = queryClient.getQueryData(['todo', newTodo.id]);

    queryClient.setQueryData(['todo', newTodo.id], newTodo);

    return { previousTodo };
  },
  // 2. 실패 시 롤백
  onError: (err, newTodo, context) => {
    if (context?.previousTodo) {
      queryClient.setQueryData(['todo', newTodo.id], context.previousTodo);
    }
  },
  // 3. 성공 또는 실패 후 refetch
  onSettled: (newTodo) => {
    queryClient.invalidateQueries(['todo', newTodo.id]);
  },
});

---

⚠️ 유의사항

• 서버 요청이 실패할 수 있다는 전제 하에 롤백 로직이 꼭 필요하다.
• 낙관적 업데이트는 클라이언트 상태와 서버 상태가 불일치할 수 있음에 유의해야 한다.
• 캐시 상태와 실제 UI가 다를 수 있기 때문에, 꼭 서버 정합성 유지도 고려해야 한다.

---

🔨 TIL

• 낙관적 업데이트는 사용자에게 빠른 응답을 주는 기술이다.
• UI를 먼저 변경하고 요청을 보내며, 실패 시 롤백이 핵심 포인트다.
• 직접 구현할 수도 있고, React Query 같은 라이브러리를 활용해 더 안전하게 처리할 수 있다.
• 실무에서는 댓글, 좋아요, 투표 등 자주 쓰이는 패턴이니 익혀두자!