비동기 처리와 렌더 타이밍

작업 시작

요청 직전에 pending을 켜고 이전 오류를 정리한다.

await는 함수 실행을 잠시 멈추지만 브라우저 UI 스레드를 막는 것은 아니다.

성공하면 data, 실패하면 error를 갱신하고 pending을 끈다.

컴포넌트가 사라지거나 입력이 바뀌면 이전 요청을 무시하거나 취소한다.

pending

진행 중 표시 중복 제출 방지와 skeleton 표시 기준

버튼 disabled와 연결

data

성공 결과 응답 스키마를 화면 모델로 변환

null과 빈 배열 구분

error

실패 이유 네트워크, 권한, validation을 나눠 표시

사용자 행동 제안 포함

cancel

오래된 요청 차단 AbortController나 request id로 최신성 보장

검색 UI에서 중요

세 상태 대기, 성공, 실패 화면이 모두 존재한다.

최신성 이전 요청 응답이 나중에 도착해도 화면을 덮지 않는다.

언마운트 사라진 컴포넌트에 상태 갱신을 시도하지 않는다.

오류 메시지 개발자 로그가 아니라 사용자가 할 행동을 알려준다.