JavaScript queueMicrotask() 설명: 즉시 실행되지만 지금은 아님
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

JavaScript의 queueMicrotask(): 즉시 실행되지만 지금은 아님

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자, 비동기 프로그래밍을 학습하는 중급자, 이벤트 루프 이해가 필요한 프론트엔드 개발자

핵심 요약

  • queueMicrotask()마이크로태스크 큐에 함수를 추가하여 동기 코드 실행 후, 렌더링 또는 타이머 콜백 전에 실행되도록 함
  • queueMicrotask()setTimeout(callback, 0)보다 우선순위가 높아 마이크로태스크 큐에서 먼저 실행됨
  • 프레임워크 내부에서 상태 변경 후 즉시 실행이 필요한 작업(예: UI 업데이트)에 유용

섹션별 세부 요약

  1. JavaScript 이벤트 루프 구조
  • 동기 코드 실행 → 마이크로태스크 큐 처리 → (선택적) 렌더링 → 마크로태스크 큐 처리 반복
  • 마이크로태스크(queueMicrotask, Promise.then)는 마크로태스크(setTimeout, setInterval)보다 우선순위가 높음
  1. queueMicrotask() vs setTimeout
  • setTimeout(callback, 0)마크로태스크 큐에 추가되며, 렌더링 또는 이벤트 처리 후 실행됨
  • queueMicrotask(callback)마이크로태스크 큐에 추가되어, 동기 코드 실행 후 즉시 실행
  1. 예제 코드 및 실행 순서

```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');

```

  • 예상 출력 순서
  1. Start
  2. End
  3. queueMicrotask (Microtask)
  4. Promise.then (Microtask)
  5. setTimeout (Macrotask)
  1. queueMicrotask()의 활용 사례
  • 프레임워크 내부에서 상태 변경 후 UI 업데이트
  • Promise와 동일한 타이밍 세마포트를 유지하면서 비동기 작업을 추가할 때

결론

queueMicrotask()동기 코드 실행 후 즉시 실행되지만, 렌더링 또는 타이머 콜백 전에 실행되는 특징을 활용하여 UI 업데이트, 상태 추적, 비동기 작업 순서 조절에 유용합니다. 예제에서 보듯이, 마이크로태스크는 마크로태스크보다 우선순위가 높아 프로젝트에서 비동기 로직의 정확한 타이밍을 관리하는 데 핵심적인 역할을 합니다. 실무에서는 queueMicrotask()를 사용하여 렌더링 전에 데이터 처리가 필요한 작업에 적용하는 것이 권장됩니다.