React 낙관적 업데이트가 어긋날 때 확인 순서

React에서 낙관적 업데이트(optimistic update)를 쓸 때 가장 흔한 문제는 실제 API 응답과 로컬 상태가 엇갈리는 것이다. 버튼을 누르면 바로 화면에 반영되지만, 서버 응답이 실패하거나 지연되면 상태 불일치가 생긴다.

로컬과 배포 환경은 다르다

로컬에서는 네트워크가 빠르고 서버 응답이 즉각 나온다. 그래서 낙관적 업데이트가 항상 성공하는 것처럼 보인다. 하지만 배포 환경에서는 네트워크 지연, 서버 과부하, 동시 요청 등으로 상황이 달라진다.

낙관적 업데이트를 제대로 테스트하려면 개발자 도구에서 네트워크를 느리게 설정하고 테스트해야 한다.

npm run build
# 브라우저 개발자 도구 > 네트워크 탭 > Throttling 설정 후 테스트

이렇게 지연을 시뮬레이션해야 실제 문제를 재현할 수 있다.

상태 업데이트 순서가 중요하다

낙관적 업데이트는 보통 이 순서로 진행된다:

1. 로컬 상태를 먼저 업데이트 (화면에 즉시 반영)
2. 서버에 요청 전송
3. 서버 응답 받으면 확인 (성공하면 유지, 실패하면 롤백)

문제는 2번 과정에서 발생한다. 요청 중에 사용자가 다시 조작하거나, 여러 요청이 동시에 들어오면 상태 순서가 뒤바뀔 수 있다.

에러 처리를 먼저 명확히 하자

낙관적 업데이트가 실패했을 때 어떻게 할지를 미리 정해야 한다. 원래 상태로 롤백할 것인가, 사용자에게 오류를 알릴 것인가, 재시도할 것인가.

이를 명확히 하지 않으면 부분적으로 업데이트된 UI가 남아서 혼란스러워진다.

여러 상태 변화를 한 번에 하지 말자

낙관적 업데이트 중에 다른 상태도 같이 바꾸면 복잡해진다. 예를 들어 리스트를 업데이트하면서 동시에 페이지 번호나 필터도 바꾸면, 뭘 롤백해야 할지 헷갈린다.

한 가지 상태 변화가 완료된 후 다음으로 진행하는 방식이 낫다.

로그를 남겨서 다음에 빨리 찾자

낙관적 업데이트 문제가 생기면 보통 재현이 어렵다. 그래서 에러 로그, 요청 시각, 응답 시각을 함께 기록해두면 다음에 같은 문제가 생겼을 때 빠르게 찾을 수 있다.