[모던 리액트 딥다이브] 1.5장 이벤트 루프와 비동기 통신의 이해

 

동기

• 직렬 방식으로 작업을 처리하는 것
• 하나의 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리할 수 있음
• 그동안 다른 모든 작업은 대기함

 

싱글 스레드 자바스크립트

• 자바스크립트는 싱글 스레드로 작동하기 때문에 기본적으로 한 번에 하나의 작업만 동기 방식으로 처리할 수 있음
• 자바스크립트는 초기에 HTML을 그리는데 보조하는 역할로 탄생했기 때문에 멀티 스레드 복잡한 내부 처리와 동시성 문제가 발생할 수 있는 멀티 스레드가 아닌 싱글 스레드로 설계됨
• 자바스크립트에서 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는 특징을 갖음 = "Run-to-completion"

 

 

비동기

• 동시에 일어나지 않는 것
• 병렬 방식으로 작업을 처리할 수 있음
• 동기식과 다르게 요청한 즉시 결과가 주어지지 않을 수 있고, 따라서 응답이 언제 올지도 알 수 없음
• 하지만 여러 작업을 동시에 수행할 수 있다는 장점이 있음

console.log(1);

setTimeout(() => {
	console.log(2);
}, 0)

setTimeout(() => {
	console.log(3);
}, 1000)

console.log(4);

// 실행 결과는 1 4 2 3

 

 

 

이벤트 루프란

• 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치
• 콜 스택이 비어 있는지 여부를 확인함
• 단순히 이벤트 루프만의 단일 스레드 내부에서 호출 스택에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있다면 자바스크립트 엔진을 이용해 실행함
• 비동기로 실행할 작업을 태스크 큐에 넣음
• 만약 호출 스택이 비어있다면 태스크 큐를 확인하고 작업이 있으면 해당 작업을 수행함
• 이벤트 루프는 태스크 큐를 한 개 이상 가지고 있음
• 비동기 함수의 콜백 함수나 이벤트 핸들러는 자바스크립트가 코드가 동기적으로 실행되는 메인 스레드가 아닌 태스크 큐가 할당되는 별도의 스레드에서 수행됨
• 별도의 스레드에서 태스크 큐에 작업을 할당해 처리하는 것은 브라우저나 Node.js의 역할

 

호출 스택(call stack) : 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택

 

 

 

태스크 큐

• 실행해야 할 태스크(비동기 함수의 콜백 함수나 이벤트 핸들러 등)의 집합
• 태스크 큐는 큐가 아닌 set 형태를 띠고 있음
• 그 이유는 선택된 큐 중에서 실행 가능한 가장 오래된 태스크를 가져와야 하기 때문
• 대표적인 작업 : setTimeout, setInterval, setImmediate

 

 

 

마이크로 태스크 큐

• 이벤트 루프는 하나의 마이크로 태스크 큐를 가짐
• 기존의 태스크 큐와는 다른 태스크를 처리
• 대표적인 작업 : process.nextTick, Promises, queueMicroTask, MutationObserver
• 기존 태스크 큐보다 우선권을 갖음
• 마이크로 태스크 큐가 빌 때까지 기존 태스크 큐의 실행은 뒤로 미뤄짐

 

 

렌더링은 마이크로 태스크 큐 작업이 끝날 때 실행되는 기회를 얻음
즉, 마이크로 태스크 큐와 태스크 큐 사이에 일어남