로딩 상태가 멈춰있을 때 안전하게 고치는 방법

로딩이 끝나지 않는 세 가지 원인

사용자 입장에서는 "로딩이 끝나지 않는다"고 보이지만 실제로는 다음 중 하나다:

• API 응답이 오지 않음
• 응답은 왔는데 로딩 상태 플래그를 false로 설정하지 않음
• 응답 후 리렌더링이 안 됨

가장 흔한 실수는 두 번째다. 개발자가 로딩 상태를 on으로는 설정하지만 다양한 시나리오(성공, 실패, 타임아웃)에서 off를 빠뜨린다.

브라우저 개발자 도구로 직접 확인

리액트 개발자 도구를 켜두고:

1. 로딩을 트리거하는 액션 수행
2. 상태 값을 관찰: isLoading 이 언제 false가 되나?
3. Network 탭: API 요청이 정말 날아가고 응답이 오나?

API 응답이 30초 이상 없다면 서버 문제거나 네트워크 장애다. 그 경우는 타임아웃을 명시적으로 설정해서 사용자에게 에러 메시지를 보여줘야 한다.

# 모바일 환경에서 느린 네트워크 시뮬레이션
npm run build
# 개발자 도구 → Network → Throttling 설정

코드에서 흔한 실수

비동기 처리 후 상태 갱신을 빠뜨리는 경우가 많다:

// 나쁜 예: 에러 시 로딩 끝내지 않음
fetch(url).then(res => setData(res));

// 좋은 예: 모든 경로에서 로딩 종료
fetch(url)
  .then(res => setData(res))
  .catch(err => setError(err))
  .finally(() => setIsLoading(false));

상태 흐름 기록하기

문제를 해결한 후 다음을 메모해둔다:

• 어떤 액션에서 발생했는가
• 어느 상태 변수가 업데이트되지 않았는가
• 어느 브라우저/디바이스에서만 발생했는가

모바일 환경과 데스크톱, 온라인과 오프라인 네트워크 상태를 모두 테스트하면 예상 밖의 버그를 줄일 수 있다. 작은 변경 후 실제 환경에서 배포해서 확인하는 습관이 중요하다.