목차
1. 개요
2. 비동기 동작 구성
3. 비동기 동작 원리
4. event loop와 microstack queue, macrostack queue
개요
react 애플리케이션 개발을 진행하기 앞서, async와 await 그리고 promise에 대해 알아보려고 합니다. 이러한 개념들은 JS에서 비동기 제어를 위한 것들이기 때문에 선행으로 JS의 비동기에 대해 먼저 배워보겠습니다.
자바스크립트(JS)는 단일 스레드 기반의 언어로 단 하나의 작업만 처리할 수 있습니다. 하지만 브라우저가 비동기 동작을 지원해주기 때문에 JS는 단일 스레드지만 한번에 다양한 일을 수행할 수 있게됩니다.
비동기 동작 구성
JS는 브라우저의 도움으로 단일 스레드임에도 불구하고 한번데 다양한 일을 할 수 있게 된다고 했습니다.
이 동작의 핵심은 브라우저에서 제공하는 Web APIs에 있습니다.
JS와 브라우저에 의해 함수가 실행될 수 있도록 하는 구성은 크게 Call Stack, Web APIs, Callback Queue, Event Loop로 구성할 수 있습니다.
- Call Stack
- 실행된 코드를 저장하는 자료구조
- javascript engine에 위치
- 단일 스레드 (하나의 일만 수행 가능)
- Heap에 저장된 객체의 메모리 주소를 참조해서 실행된 코드를 구분
- Web APIs
- setTimeout, DOM, Ajax와 같은 다양한 스레드를 브라우저에서 제공하는 API
- 멀티 스레드
- 비동기 작업을 실제로 시작하는 곳
- Callback Queue
- 이벤트 발생시 실행해야할 콜백 함수가 저장되는 자료구조
- Event Loop
- call stack과 callback queue를 연결하는 매개체
- call stack과 callback queue를 감시
- call stack이 비어있는 경우 callback queue에서 실행 코드를 꺼내 call stack에 추가
비동기 동작 원리
비동기 동작 원리를 참고한 블로그의 예시를 사용했습니다.
console.log('first')
setTimeout(function cb() {
console.log('second')
}, 1000); // 0ms 뒤 실행
console.log('third')
1. console.log('first')가 call stack에 추가.
2. console.log('first')는 실행되어 브라우저 로그에 출력되고 call stack에서 제거
3. setTimeout이 call stack에 추가.
4. setTimeout이 실행되고 Web API의 timer 스레드에 의해 실행(0ms간 대기) call stack에서 setTimeout 제거.
5. console.log('third')가 call stack에 추가.
6. console.log('third')는 실행되어 브라우저 로그에 출력되고 call strack에서 제거
7. Web API의 timer 스레드에서 setTimeout에서 정의한 0ms 뒤에 콜백 함수 cb를 callback queue에 추가.
8. event loop는 call stack이 비어있는 것을 확인하고 callback queue에 저장되어있는 콜백함수 cb를 call stack에 추가.
9. cb함수가 실행되고 내부에 정의된 console.log('second')가 call stack에 추가.
10. console.log('second')는 실행되어 브라우저 로그에 출력되고 call stack에서 제거.
11. cb함수가 call stack에서 제거.
event loop와 microstack queue, macrostack queue
setTimeout이 호출되었을때 콜백 함수는 callback queue에 저장된다고 했습니다.
하지만 Web APIs에서 제공하는 함수 이외에도 async 함수 등과 같은 별도 함수가 실행되었을때 별개로 동작하는 큐가 존재합니다.
실제로 task queue라는 큐가 존재합니다. task queue와 callback queue는 서로 다른 큐 입니다.
즉, 비동기를 동작하는데 사용되는 큐는 task queue, callback queue 두개 입니다.
task queue는 주로 microstack queue라 불리고 callback queue는 macrostack queue라고 불립니다.
이는 microstack와 macrostack은 HTML 표준 용어이고 callback queue는 js개발자 커뮤니티에서 자주 사용되는 표현이라고 합니다.
저는 microstack queue와 macropstack queue로 표현하겠습니다.
두 개의 큐는 모두 이벤트 발생시 수행되어야 할 함수가 추가되고 저장되는 자료구조이고 저장된 함수는 event loop에 의해 call stack으로 추가되어 실행됩니다.
차이점은 우선순위 입니다. microstack queue가 macrostack queue보다 우선순위가 높습니다.
그렇기 때문에 두 큐에 함수가 저장되어있는 경우 microstack queue에 저장된 함수가 event loop에 의해서 우선적으로 call stack으로 이동되어 실행됩니다.
큐를 구분하는 기준
실행되는 코드를 구분하여 microstack queue와 macrostack queue를 저장하는 기준은 실행되는 함수입니다.
microstack queue에 저장되는 함수는 Promise callback, async function과 같이 체인 메서드로 then을 사용할 수 있는 thenable함수를 호출하는 비동기 동작시 microstack queue에 저장됩니다.
macrostack queue에 저장되는 함수는 위에서 설명했던 Web APIs에서 제공하는 setTimeout과 setImmediate 등의 함수가 호출하는 비동기 동작시 macrostack queue에 저장됩니다.
microstack queue와 macrostack queue 동작 원리
microstack queue의 우선순위가 macrostack queue보다 더 높아서 microstack queue에 저장된 함수가 먼저 실행된다고 했습니다.
두 큐가 실행되는 흐름을 비교하며 원리를 설명하겠습니다.
console.log('script start');
setTimeout(function cb1() { console.log('timeout1')}, 0);
Promise.resolve().then(function cb2 () { console.log('promise1')});
console.log('script end');
1. console.log('script start')가 call stack에 저장.
2. console.log('script start')은 브라우저 로그에 출력되고 call stack에서 삭제.
3. setTimeout이 call stack에 저장.
4. setTimeout에 의해 Web API의 timer 스레드에 의해 실행되고 정의된 0ms동안 대기.
5. Promise.resolve()함수가 호출되고 자바스크립트 엔진에 의해 promise를 resolve하는 함수가 실행되어 then 함수를 실행할 준비.
- microstack queue에는 아직 아무것도 들어가있지 않음.
6. then()함수의 콜백 함수인 cb2가 자바스크립트 엔진에 의해 microstack queue에 저장.
7. console.log('script end')가 call stack에 저장.
8. console.log('script end')는 브라우저 로그에 출력되고 call stack에서 삭제.
9. Web API의 timer는 setTimeout에서 요청한 0ms 이후 macrostack queue에 콜백 cb를 추가.
10. event loop가 call stack이 비어있는 것을 확인하고 우선순위가 높은 microstack queue의 cb2를 call stack에 추가
11. cb2 내부의 console.log('promise1')가 call stack에 저장.
12. console.log('promise1')는 브라우저 로그에 출력되고 call stack에서 삭제.
13. event loop가 call stack이 비어있는 것을 확인하고 macrostack queue의 cb1를 call stack에 추가.
14. cb1 내부의 console.log('timeout1')가 call stack에 저장.
15. console.log('timeout1')는 브라우저 로그에 출력되고 call stack에서 삭제.
참고
'cs > react' 카테고리의 다른 글
| [JS] 화살표 함수 반환 규칙 (0) | 2026.01.03 |
|---|---|
| [JS] Promise & async & await (1) | 2025.12.09 |
| [React] React Router (0) | 2025.12.05 |
| [React] Zustand (0) | 2025.12.04 |
| [React] React 성능 최적화 방법 (0) | 2025.12.03 |
