async to UI

비동기 결과를 UI 상태로 매핑하기

Callback, Promise, async/await 모두 최종적으로는 대기, 성공, 실패, 정리 상태를 화면에 반영하는 문제로 이어집니다.

비동기 처리 단계별 역할

state map

요청 시작

작업을 등록하고 로딩 상태를 켭니다.

대기 구간

메인 스레드는 다음 렌더와 이벤트를 처리합니다.

성공 값

resolve 결과를 데이터 state로 옮깁니다.

실패 값

reject나 throw를 에러 state로 분리합니다.

정리 단계

finally에서 로딩 종료와 공통 정리를 실행합니다.

렌더 분기

loading, error, data 순서로 화면을 고릅니다.

요청등록 → 대기 → 분기 → UI반영