JavaScript의 queueMicrotask(): 즉시 실행되지만 지금은 아님
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 개발자, 비동기 프로그래밍을 학습하는 중급자, 이벤트 루프 이해가 필요한 프론트엔드 개발자
핵심 요약
queueMicrotask()
는 마이크로태스크 큐에 함수를 추가하여 동기 코드 실행 후, 렌더링 또는 타이머 콜백 전에 실행되도록 함queueMicrotask()
는setTimeout(callback, 0)
보다 우선순위가 높아 마이크로태스크 큐에서 먼저 실행됨- 프레임워크 내부에서 상태 변경 후 즉시 실행이 필요한 작업(예: UI 업데이트)에 유용
섹션별 세부 요약
- JavaScript 이벤트 루프 구조
- 동기 코드 실행 → 마이크로태스크 큐 처리 → (선택적) 렌더링 → 마크로태스크 큐 처리 반복
- 마이크로태스크(
queueMicrotask
,Promise.then
)는 마크로태스크(setTimeout
,setInterval
)보다 우선순위가 높음
queueMicrotask()
vssetTimeout
setTimeout(callback, 0)
은 마크로태스크 큐에 추가되며, 렌더링 또는 이벤트 처리 후 실행됨queueMicrotask(callback)
은 마이크로태스크 큐에 추가되어, 동기 코드 실행 후 즉시 실행됨
- 예제 코드 및 실행 순서
```javascript
console.log('Start');
setTimeout(() => console.log('setTimeout (Macrotask)')); // 마크로태스크
queueMicrotask(() => console.log('queueMicrotask (Microtask)')); // 마이크로태스크
Promise.resolve().then(() => console.log('Promise.then (Microtask)')); // 마이크로태스크
console.log('End');
```
- 예상 출력 순서
- Start
- End
- queueMicrotask (Microtask)
- Promise.then (Microtask)
- setTimeout (Macrotask)
queueMicrotask()
의 활용 사례
- 프레임워크 내부에서 상태 변경 후 UI 업데이트
- Promise와 동일한 타이밍 세마포트를 유지하면서 비동기 작업을 추가할 때
결론
queueMicrotask()
는 동기 코드 실행 후 즉시 실행되지만, 렌더링 또는 타이머 콜백 전에 실행되는 특징을 활용하여 UI 업데이트, 상태 추적, 비동기 작업 순서 조절에 유용합니다. 예제에서 보듯이, 마이크로태스크는 마크로태스크보다 우선순위가 높아 프로젝트에서 비동기 로직의 정확한 타이밍을 관리하는 데 핵심적인 역할을 합니다. 실무에서는 queueMicrotask()
를 사용하여 렌더링 전에 데이터 처리가 필요한 작업에 적용하는 것이 권장됩니다.