전체 목록
상태관리Hard#366

Optimistic Update는 무엇이며 어떤 점을 주의해야 하나요?

#상태관리#UX#OptimisticUpdate#비동기

답변 포인트

서버 응답을 기다리지 않고 UI를 먼저 성공한 것처럼 바꾸는 방식을 생각해보세요.

정답 및 해설

빠른 요약

Optimistic Update는 사용자의 요청이 성공할 것이라고 가정하고 UI를 먼저 업데이트한 뒤, 실패하면 롤백하거나 보정하는 방식입니다. 체감 속도를 높일 수 있지만 실패 처리, 중복 요청, 순서 역전, 서버 검증 실패에 대비해야 합니다.

Optimistic Update는 사용자의 요청이 성공할 것이라고 가정하고 UI를 먼저 업데이트한 뒤, 실패하면 롤백하거나 보정하는 방식입니다. 체감 속도를 높일 수 있지만 실패 처리, 중복 요청, 순서 역전, 서버 검증 실패에 대비해야 합니다.

핵심 개념

핵심 기준은 성공을 가정한 선반영과 실패 시 복구입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

서버 응답을 기다리지 않고 UI를 먼저 성공한 것처럼 바꾸는 방식을 생각해보세요.

동작 흐름

  1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
  2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
  3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
  4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

좋아요 버튼을 누르면 즉시 숫자를 올리고, API 실패 시 원래 숫자로 되돌리며 토스트를 보여줍니다.

실무에서 적용하는 방법

이전 상태 스냅샷을 보관하고, 요청별 id나 mutation context로 어떤 변경을 롤백해야 하는지 추적합니다.

실무에서 주의할 점

  • 결제, 권한 변경처럼 실패 비용이 큰 작업에는 신중해야 합니다.
  • 서버 응답이 로컬 예상과 다르면 최종적으로 서버 값을 신뢰하도록 재동기화해야 합니다.
  • 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
  • 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

상태관리, UX, OptimisticUpdate, 비동기

면접에서 짚으면 좋은 포인트

  • 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
  • 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, Optimistic Update는 사용자의 요청이 성공할 것이라고 가정하고 UI를 먼저 업데이트한 뒤, 실패하면 롤백하거나 보정하는 방식입니다. 체감 속도를 높일 수 있지만 실패 처리, 중복 요청, 순서 역전, 서버 검증 실패에 대비해야 합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

관련 질문

같은 카테고리/태그 기준