React 로딩 상태가 꼬일 때

로딩 상태 버그는 보통 상태 업데이트 타이밍이 맞지 않거나 여러 요청이 경합할 때 생긴다. 처음부터 정답을 찾으려고 하면 오히려 시간이 오래 걸린다.

가장 먼저: 어떤 상태가 안 맞는가

로딩 상태 이름을 정확히 파악한다. isLoading, loading, isFetching 등 여러 상태가 섞여 있거나 이름이 모호하면 헷갈리기 쉽다. 컴포넌트의 현재 상태를 콘솔로 매번 찍어보고 UI의 변화와 매칭한다.

사용자가 보는 화면은 맞는가

실제 UI가 맞게 나타나는지부터 확인한다. 로딩 인디케이터가 안 보이거나, 늦게 나타나거나, 사라지지 않는 경우가 있다. 브라우저 개발자 도구에서 Slow 3G 같은 느린 네트워크를 시뮬레이션하면 실제 사용자 환경을 더 잘 이해할 수 있다.

# 프로덕션과 개발 환경 모두에서 테스트
npm run build
# 브라우저에서 모바일 뷰와 느린 네트워크 조건 시뮬레이션

여러 요청이 동시에 올 때

사용자가 빠르게 버튼을 여러 번 클릭하거나 여러 페이지가 동시에 데이터를 요청하는 경우를 테스트한다. 마지막 요청의 응답이 나중에 도착하는데도 먼저 도착한 요청의 결과가 덮어씌워지면 로딩 상태가 꼬인다. 각 요청마다 ID를 붙여서 응답을 매칭하거나 취소 로직을 추가해야 한다.

환경에 따른 동작 확인

로컬 개발 환경과 프로덕션의 동작이 다를 수 있다. 로컬에서는 네트워크가 빠르거나 mock 데이터를 쓸 수 있지만, 실제 환경에서는 지연과 에러가 자주 일어난다. 실제 API와 연결해서 테스트하거나 네트워크 지연을 의도적으로 추가해서 테스트한다.

해결 후 검증

로딩 상태를 수정한 후 다음을 확인한다:

1. 정상 상황에서 로딩 인디케이터가 적절히 나타나고 사라지는가
2. 에러 상황에서는 에러 메시지가 제대로 나타나는가
3. 여러 요청이 겹칠 때 UI가 일관되게 동작하는가

결과를 기록해두면 다음에 유사한 상태 관리 문제를 더 빠르게 디버깅할 수 있다.