React · Async UI

로딩·빈 값·오류 화면의 우선순위

비동기 화면은 성공 결과만 그리는 것이 아니라, 대기 중인지 결과가 비었는지 실패했는지를 서로 다른 상태로 보여줘야 한다.

01

초기 대기

첫 요청 전에는 skeleton 또는 진행 표시로 화면이 준비 중임을 알린다.

02

성공 분기

데이터가 있으면 목록을, 없으면 empty state를 표시한다.

03

실패 분기

오류 종류에 따라 재시도, 로그인 이동, 입력 수정 안내를 나눈다.

04

부분 갱신

이미 데이터가 있을 때 재요청 중이면 전체 화면을 지우지 않고 갱신 상태만 표시한다.

Skeleton
형태 예고 콘텐츠 구조를 유지하며 첫 대기를 표현
실제 레이아웃과 크기 맞춤
Spinner
짧은 작업 버튼 제출이나 작은 영역 갱신에 적합
긴 대기에는 정보 부족
Empty
정상적인 빈 결과 검색 결과 없음, 아직 작성한 항목 없음
다음 행동 제시
Error
회복 가능한 실패 재시도 버튼과 원인 요약 제공
stack trace 노출 금지

상태 구분 · 부분 로딩 · 재시도 점검

상태 구분 빈 배열을 로딩이나 오류로 오해하지 않는다.
부분 로딩 기존 데이터를 유지한 채 새로고침 중임을 표시한다.
재시도 사용자가 실패 화면에서 바로 다시 요청할 수 있다.
레이아웃 로딩과 성공 화면 전환 때 큰 밀림이 없다.