React · Async JavaScript

비동기 JavaScript와 React 상태 반영

비동기 처리는 코드가 나중에 끝나는 문제만이 아니라, 그 결과를 현재 화면이 아직 필요로 하는지 확인한 뒤 state에 반영하는 문제다.

01

요청 시작

사용자 행동이나 effect에서 pending을 켜고 이전 오류를 정리한다.

02

대기

await는 결과를 기다리지만 브라우저 화면 그리기를 멈추는 것은 아니다.

03

결과 판정

성공 응답은 data로, 실패는 error로 분리해 저장한다.

04

최신성 확인

id나 query가 바뀐 뒤 도착한 이전 응답은 무시하거나 취소한다.

pending
대기 중 버튼 disabled, skeleton, progress 표시 기준
중복 요청 방지
fulfilled
성공 응답을 화면 모델로 매핑해 저장
빈 결과와 성공 구분
rejected
실패 네트워크, 권한, validation을 구분
사용자 행동 안내
aborted
취소 화면 이탈이나 입력 변경으로 이전 요청 중단
AbortController 활용

세 상태 · 경쟁 상태 · 정리 점검

세 상태 대기·성공·실패 UI가 모두 존재한다.
경쟁 상태 빠른 검색어 변경에서 오래된 응답이 화면을 덮지 않는다.
비동기 흐름 판별 언마운트 후 setState를 시도하지 않는다.
오류 catch에서 콘솔만 찍고 사용자를 방치하지 않는다.