React에서 낙관적 업데이트가 제대로 안 될 때

낙관적 업데이트가 제대로 안 된다면, 검색해서 들어온 상황이더라도 먼저 재현 조건부터 잡는 것이 빠르다.

핵심은 프론트엔드 UX 전체 흐름에서 원인을 찾고, 실제로 화면에서 뭐가 보이는지 확인하는 것이다.

처음 보이는 증상 정리

사용자가 뭘 했을 때 뭐가 이상한가? 폼을 입력할 때? 제출할 때? 응답이 올 때?

증상을 정확히 정의하면 원인을 찾기 쉬워진다.

원인을 나누는 기준

낙관적 업데이트 문제는 대부분 다음 중 하나다:

1. 렌더링 조건이 맞지 않음
2. 이벤트 흐름이 잘못됨
3. 상태 관리 로직이 복잡함

정상 상태부터 먼저 정해둔다. 그래야 뭐가 이상한지 판단할 수 있다.

이벤트 흐름 확인

사용자가 폼을 입력했을 때 뭐가 일어나나?

npm run build
# 브라우저의 네트워크 탭과 콘솔을 열고, 폼 입력 흐름을 따라간다

• 먼저 볼 것: 렌더링 조건과 이벤트 흐름
• 비교할 것: 정상일 때의 상태
• 기록할 것: 명령어, 콘솔 로그, 수정한 설정

명령으로 보는 방법

브라우저 콘솔에서 상태를 직접 확인해본다. 낙관적 업데이트가 제대로 되고 있나.

모바일 화면에서 확인

모바일에서는 다르게 보일 수 있다. 브라우저 개발자도구에서 모바일 모드로 전환해서 확인해본다.

검증

1. 실제로 같은 조건에서 증상이 나타나나 확인한다.
2. 콘솔 로그에서 뭐가 달라졌는지 설명한다.
3. 실제로 응답이 올 때까지 폼이 제대로 작동하는지 확인한다.

한 번에 여러 설정을 바꾸지 않으면 원인 추적이 쉬워진다. 이번 확인을 기록해두면 다음에 비슷한 문제가 생길 때 빠르게 대응할 수 있다.