Promise와 microtask 실행 타임라인

클릭 핸들러 실행

setStatus("loading") 후 요청 함수를 호출합니다.

아직 비어 있음

Promise callback은 동기 코드가 끝난 뒤 들어옵니다.

pending 생성

값은 없고 완료 또는 실패 알림만 예약됩니다.

loading 렌더

사용자에게 진행 중 상태를 먼저 보여줍니다.

스택 비움

동기 함수가 반환되어 브라우저가 다음 작업을 고릅니다.

then 또는 catch 대기

Promise 결과가 정해지면 microtask로 이어 붙습니다.

계속 pending

화면은 결과를 동기 값처럼 읽으면 안 됩니다.

기존 화면 유지

loading은 유지되고 success/error는 아직 없습니다.

microtask 실행

then 또는 catch 본문이 스택에 올라옵니다.

큐에서 꺼냄

timer보다 먼저 처리되어 상태 변경을 빠르게 예약합니다.

결과 확정

fulfilled와 rejected 중 하나만 선택됩니다.

아직 커밋 전

React 상태 업데이트가 모여 다음 렌더를 준비합니다.

fulfilled 경로

setData와 setStatus("success")를 호출합니다.

rejected 경로

catch에서 setError와 error 상태를 예약합니다.

fulfilled

데이터가 준비되어 success 화면으로 갈 수 있습니다.

rejected

catch가 없으면 오류 렌더 없이 실패가 밖으로 새어 나갑니다.

상태 전이 완료

이 시점 이후에야 결과 UI를 믿을 수 있습니다.

큐 비움

남은 microtask가 없으면 다음 렌더와 브라우저 작업으로 이동합니다.

settled

Promise는 fulfilled 또는 rejected 중 하나로 고정됩니다.

success 또는 error

화면은 데이터 표시나 실패 안내 중 하나로 수렴합니다.

✓

fulfilled - then 분기 응답 값을 받은 뒤 data와 success를 함께 갱신합니다. loading은 결과 상태로 자연스럽게 대체됩니다.

rejected - catch 분기 실패 이유를 error 상태에 담고 복구 UI를 렌더합니다. catch가 빠지면 rejected Promise가 화면 상태와 분리됩니다.

타이밍 검증 지점

동기 착각 방지 요청 함수 호출 직후에는 데이터가 아니라 pending Promise만 있습니다.

microtask 우선순위 then/catch는 call stack이 빈 뒤, timer보다 먼저 실행됩니다.

catch 위치 확인 rejected를 catch에서 error 렌더로 연결해야 실패가 보입니다.