React async

비동기 처리는 기다림을 이벤트 루프와 Promise 상태로 분리한다

API 호출, 타이머, 파일 처리처럼 오래 걸리는 작업은 결과가 돌아올 때 다시 이어 붙이고, 그 사이 UI 응답성을 유지한다.

읽는 순서 동기 대기와 비동기 위임을 먼저 나누고, 콜백의 중첩 문제를 Promise와 async/await가 어떻게 정리하는지 본다.

비동기 처리 책임표
방식	기다림 처리	대표 사용	확인 지점
동기 실행	앞 줄 완료까지 다음 줄이 멈춘다.	짧은 계산, 즉시 끝나는 로직	긴 작업이 UI를 막지 않는지 본다.
Callback	완료 후 실행할 함수를 넘긴다.	이벤트, 타이머, 초깃값 처리	중첩과 오류 전파가 흐려지지 않는지 본다.
Promise	pending, fulfilled, rejected 상태로 결과를 가진다.	fetch, 체이닝, 후속 정리	catch와 finally가 빠지지 않았는지 본다.
async/await	Promise 흐름을 동기식 문장처럼 읽게 한다.	폼 제출, 데이터 로딩, try/catch	병렬이 필요하면 Promise.all로 묶는다.

Call Stack 현재 실행 중인 동기 코드가 쌓이고 빠진다.

Web API 타이머, 네트워크 요청처럼 브라우저가 맡는 작업이다.

Queue 완료된 콜백과 마이크로태스크가 다시 실행 순서를 기다린다.

Render 무거운 동기 코드가 길어지면 화면 갱신이 늦어진다.