React 낙관적 업데이트가 깜빡일 때 원인 찾는 방법

낙관적 업데이트는 사용자 경험을 좋게 만들지만, 구현이 복잡하면 화면이 깜빡이거나 일관성이 없어질 수 있다.

이벤트 흐름을 정리한다

사용자가 버튼을 눌렀을 때부터 서버 응답까지의 흐름을 따라간다:

1. 사용자 클릭 → UI 즉시 업데이트
2. API 요청 시작
3. 서버 응답 도착
4. 상태 갱신

이 중 어느 단계에서 UI가 다시 바뀌는지 추적해야 한다.

브라우저 개발자 도구로 이벤트를 본다

npm run build

빌드 후 브라우저 DevTools의 Network 탭에서 API 요청의 응답 시간을 본다. 만약 응답이 실제로 느리다면, 낙관적 업데이트 없이는 사용자가 기다려야 한다. 이 경우 로딩 표시를 명확히 하는 게 낫다.

상태 업데이트 순서를 확인한다

낙관적 업데이트 후 서버 응답이 왔을 때:

• 만약 낙관적 상태가 맞다면: 상태를 갱신할 필요 없다
• 만약 서버 응답이 다르다면: 상태를 서버 값으로 덮어써야 한다

이 로직이 빠지면 화면이 깜빡인다.

모바일 환경에서도 테스트한다

네트워크가 느린 환경에서 낙관적 업데이트가 제대로 작동하는지 본다. 브라우저의 Network 탭에서 네트워크 속도를 제한할 수 있다.

로그를 남겨 두어 재현 가능하게 한다

"화면이 이상하다"보다 "이미지 추가 후 2초 뒤 다시 사라진다" 같은 구체적인 설명이 디버깅에 훨씬 도움이 된다.