출처

JS를 주로 구동하는 것은 V8 Engine이다. 리액트 또한 V8 Engine을 사용한다.
V8 Engine은 싱글 스레드로 구성되어 있고 이말인 즉슨 콜 스택이 하나라는 뜻이다.

1. 메모리 힙 : 메모리 힙에는 참조형 데이터가 저장된다. ex) 객체, 배열

2. 콜 스택 : 콜 스택에는 호출된 함수를 쌓아두었다가 실행한다.

스택은 알다시피 LIFO 형식으로 쌓인다
그 말인즉슨

function a (){}
function b (){}
function c (){}
function d (){}

로 호출된다 하더라도 a - b - c - d 순이 아니라 d - c - b - a 순으로 작업한다.

하지만 여기서 주의 깊게 봐야할 것은

Web API는 자바스크립트의 구성요소가 아니다!

즉 DOM, ajax 등 비동기 함수가 포함된 Web API는 콜 스택에서 함수가 실행될때 해당 함수 내에서 호출하는것이다.
이후 콜백 데이터를 콜백 큐에 담아서 반환한다.

Callback Queue

Callback Queue는 비동기적으로 실행된 콜백이 담기는 영역이다.

Event Loop

루프는 콜 스택과 Callback Queue를 제어하며 Call Stack이 비게 되면 Callback Queue의 첫번째 콜백을 Call Stack에 넣는다. (쉽게 이야기하면 콜 스택이 끝나야 콜백이 들어온다. 그래서 동기함수 먼저 실행되고 이후에 비동기함수가 실행된다.)

이러한 행위를 틱(tick)이라 한다.

이러한 행위로 싱글 스레드이지만 멀티스레드처럼 보인다.

---