React 비동기 데이터

대기·실패·재시도 상태 설계

로딩과 에러 처리는 보조 UI가 아니라 사용자 흐름의 일부입니다. 대기, 실패, 빈 결과, 재시도를 서로 다른 상태로 다룹니다.

01

상태 전이와 사용자 행동 분리

요청 상태를 idle, loading, success, empty, error, retry로 나누고 각 상태의 화면 문구와 버튼을 정합니다. 하나의 boolean으로 합치면 빈 결과와 실패가 섞입니다.

요청 수명 주기
02

loading, empty, error 렌더 경계

조건부 렌더링은 spinner, empty view, error message, retry button을 서로 다른 branch로 둡니다. 예외는 사용자 행동으로 바꿀 수 있는 메시지와 재시도 조건에 매핑합니다.

오류 처리
03

spinner 고착과 error 덮어쓰기

실패 뒤 spinner가 계속 보이거나 retry 성공 후 이전 error가 남는 조건을 잡습니다. 지연 응답과 stale response가 마지막 요청 기준을 흔드는지도 확인합니다.

캐시와 재검증
04

retry와 실패 재현 검증

상태 전이표, 느린 응답, 빈 배열, 실패 응답, retry 성공 결과를 함께 남깁니다. 마지막 요청이 끝났을 때 화면이 정확히 하나의 상태로 닫혀야 합니다.

close
책임
로딩 상태는 요청 중임을 알리고 에러 상태는 다음 행동을 안내한다 idle, loading, success, empty, error를 하나의 boolean으로 뭉치지 말고 사용자가 볼 메시지와 버튼을 상태별로 분리합니다.
범위
경계
에러 처리는 예외 메시지를 사용자 문구와 retry 동작으로 변환한다 네트워크 실패, 권한 오류, 빈 데이터는 서로 다른 안내와 재시도 조건을 가져야 같은 화면에서 구분됩니다.
경계
상태 전이
지연 응답, 빈 배열, 실패 응답, 재시도 성공을 따로 재현한다 loading spinner가 남는 경우와 error가 data를 덮는 경우를 확인해 상태 전이가 마지막 요청 기준으로 닫히는지 봅니다.
점검

요청 상태 전이 검증 지점

상태 분리 요청 시작, 성공 응답, 빈 결과, 재시도 성공이 각각 다른 화면과 버튼 상태로 드러나는지 확인합니다.
지연/실패 응답 실패 응답과 느린 응답을 따로 재현하지 않으면 spinner가 남거나 이전 error가 성공 화면을 덮는 결함이 숨어 남습니다.
retry 결과 상태 전이표, 네트워크 실패 로그, retry 결과를 함께 남겨 마지막 요청 기준으로 화면이 닫히는지 다시 확인합니다.

상태 전이 점검

질문: loading, empty, error, retry 상태가 서로 다른 화면과 행동으로 드러나는가
순서: 요청 시작 시 loading 표시 -> 빈 결과와 error 분리 -> retry 성공 때 이전 error 초기화
위험: loading과 error를 같은 플래그로 처리하면 실패 뒤 spinner가 남거나 stale response가 성공 화면을 다시 덮습니다.