이 글은 모던 리액트 Deep Dive를 기반으로 작성되었습니다.

자바스크립트의 비동기처리

모던 리액트를 공부하던 중 리액트 파이버에 관한 챕터에서 의문이 생겼다. 과거의 리액트를 소개하면서 자바스크립트가 싱글스레드이기에 동기 작업이 이루어진다고 했다. 그러나 내가 아는 자바스크립트는 비동기 작업으로 진행된다고 알고있다.

자바스크립트를 사용하는 유저라면 자바스크립트가 보통은 요청을 비동기 방식으로 처리한다고들 알고 있을 것이다. 실제로, 코드를 구현해보면 비동기식으로 처리가 되니까, 여기서 문제는 자바스크립트가 싱글스레드 구조라는 것이다.

📌싱글스레드의 비동기처리?

모순적이다. 싱글스레드면 동기 처리가 맞지않나? 어떻게 비동기처리가 가능한거지? 아래의 글을 찾아보면 자바스크립트의 메인 엔진 외에 작동하는 요소들로 인해서 비동기 처리가 가능하다고 설명한다.

자바스크립트 엔진 밖에서도 자바스크립트 실행에 관여하는 요소들이 존재한다. 각각 Web API와 Task Queue, Event Loop 이다.

자바스크립트 싱글스레드인데 왜 비동기적 일까?

자바스크립트 관련 수업을 들었을 때 자바스크립트의 장점으로 Web API와 호환이 된다는 내용을 본 적이 있다. 아마 이 부분에 대한 설명이 아니었을까싶다.

💎setTimeout

다음의 예시코드를 봐보자.

const testA = () => {
	console.log("testA")
}

const testB = () => {
	console.log("testB")
}

setTimeout(testB, 100);
testA();

<!-- console 창 결과 -->
testA
testB

위의 코드를 실행시키면 testA가 먼저 출력된다. 만약 동기 작업이였다면 setTimeout의 결과가 나올 때까지 모든 작업을 멈추고 결과가 나온 뒤에 넘어갔을 것이다. 그러나 setTimeout은 JS엔진에서 작동하는게 아닌 Web API해서 작동된다. 따라서 결과는 비동기처리처럼 나온다.

💎testA()가 100ms보다 오래걸리면?

만약 testA가 setTimeout(testB, 100)보다 오래걸린다면, testB가 먼저 출력될 것이라고 생각할 수있지만 그렇지 않다. setTimeout는 작업이 종료되면 자바스크립트의 Call Stack으로 바로 들어가는게 아니라, Task Queue에 저장되고 Call Stack가 비워지면 Stack으로 들어가 실행된다.

즉, 빠른 작업을 위해 다른 엔진을 사용해 비동기처리가 가능할 뿐이지 비동기처리가 된다고 즉시 반영이 되는 것이 아니라 Call Stack에 순차적으로 저장되고 실행된다.