[React Query] 낙관적 업데이트

낙관적 업데이트란?

낙관적 업데이트는 서버가 성공할 거라고 믿고 UI를 먼저 바꾼 뒤, 실패하면 되돌리는 기술이다.

 

 

예시(좋아요 버튼)

const [like, setLike] = useState(0);

const handleLike = async () => {
  const prev = like;
  setLike(like + 1); // 🔥 UI 먼저 변경 (낙관적 업데이트)

  try {
    await api.likePost(); // 서버 요청
  } catch (e) {
    setLike(prev); // ❗ 실패하면 원래 값으로 롤백
  }
};

 

🔥 왜 필요해?

예를 들어 “좋아요 👍 버튼”을 눌렀다고 생각해보면:

아무 동작도 없이 서버 응답이 올 때까지 기다리면

• UI 반응 느림
• 사용자 경험 나빠짐

그래서 ❗ 서버가 성공할 것이라고 ‘낙관적으로 기대’하고 먼저 UI를 변경한다.

---

📌 동작 흐름

1. 사용자가 버튼 클릭
2. UI 먼저 변경 (좋아요 +1)
3. 서버에 요청 보내기
4. 서버 응답이 성공 → 그대로 유지
   ❗ 실패 → UI를 원래대로 되돌림

 

💡 장점

빠른 반응	서버 기다리지 않아서 UX 향상
사용자 만족	앱이 빠르고 부드럽게 느껴짐

⚠️ 단점

서버 실패 시	화면을 되돌려야 해서 처리 필요
복잡성	데이터 상태 관리 로직이 조금 복잡해짐

---

🔥 언제 쓰면 좋을까?

• 좋아요 / 북마크 / 찜하기
• 장바구니 추가
• 댓글 작성
• 체크박스 토글
• 리스트 아이템 삭제

즉, 성공 확률이 높고 실패해도 큰 문제가 없는 경우에 많이 사용