이벤트루프 - 모던 리액트 Deep Dive

react Deep Dive책에서 내가 이해하기 쉽게 적힌 부분이 있어서 기록~책마다 조금씩 다르게 설명하니 중복세션을 여러 책 돌려보는것이 아주좋은듯~!

호출 스택이 비어 있는지 여부를 확인하는 것이 바로 이벤트 루프

이벤트 루프는 호출 스택 내부에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있 다면 자바스크립트 엔진을 이용해 실행한다.

한 가지 알아들 점은 '코드를 실행하는 것과 '호를 스펙이 비의 있는지 확인하는 것' 모두가 단일 스레드에서 일어난다는 점이다.

즉, 두 작업은 동시에 일어날 수 없으며 스레드에서 순차적으로 일어난다.

그렇다면 비동기 작업은 어떻게 실행될까?
function bar() {
console. log('bar')
}

function baz() {
console. log('baz')
｝

function foo) {
console. log('foo')
setTimeout(bar), 0) 1/ setTimeout만 추가했다.
baz()
}
foo()

호출 스택 내부에서는 아래와 같은 순서로 발생한다.

1. foo()가 호출 스택에 먼저 들어간다.
   ()001 240.
2. foo() 내부에 console. 10g가 존재하므로 호출 스택에 들어간다.
3. 2의 실행이 완료된 이후에 다음 코드로 넘어간다. (아직 foo()는 존재)
4. setTimeout (bar(), 0)이 호출 스택에 들어간다.
5. 4번에 대해 타이머 이벤트가 실행되며 태스크 큐로 들어가고, 그 대신 바로 스택에서 제거된다.
6. baz ()가 호출 스택에 들어간다.
7. baz) 내부에 consoLe. Log가 존재하므로 호출 스택에 들어간다.
8. 7의 실행이 완료된 이후에 다음 코드로 넘어간다. (아직 foo(), baz()는 존재)
9. 더 이상 baz()에 남은 것이 없으므로 호출 스택에서 제거된다. (아직 foo()는 존재)
10. 더 이상 foo()에 남은 것이 없으므로 호출 스택에서 제거된다.
11. 이제 호출 스택이 완전히 비워졌다.
12. 이벤트 루프가 호출 스택이 비워져 있다는 것을 확인했다. 그리고 태스크 큐를 확인하니 4번에 들어갔던 내용이 있어 bar()를 호출 스택에 들여보낸다.
13. bar() 내부에 console. log가 존재하므로 호출 스택에 들어간다.
14. 13의 실행이 끝나고, 다음 코드로 넘어간다. (아직 bar() 존재)
15. 더 이상 bar()에 남은 것이 없으므로 호출 스택에서 제거된다.
    위 코드를 보면, setTimeout(0=> (}), 0)이 정확하게 0초 뒤에 실행된다는 것을 보장하지 못한다는 것을 이해하게 될 것이다.

여기서부터는 태스크 큐라는 새로운 개념이 등장한다.
태스크 큐란 실행해야 할 태스크의 집합을 의미한다.

이벤트 루프는 이러한 태스크 큐를 한 개 이상 가지고 있다.
태스크 큐에서 의미하는 '실행해야 할 태스크'라는 것은 비동기 함수 의 콜백 함수나 이벤트 핸들러 등을 의미한다.

즉, 이벤트 루프의 역할은 호출 스택에 실행 중인 코드가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는 지 반복해서 확인하는 역할을 한다.
호출 스택이 비었다면 태스크 큐에 대기 중인 작업이 있는지 확인하고, 이 작업을 실행 가능한 오래된 것부터 순차적으로 꺼내와서 실행하게 된다. 이 작업 또한 마찬가지로 태스크 큐가 빌 때까지 이루어진다.

그렇다면 마지막으로 궁금해지는 것은 저 비동기 함수는 누가 수행하느냐다. n초 뒤에 setTimeout을 요청 하는 작업은 누가 처리할까? fetch를 기반으로 실행되는 네트워크 요청은 누가 보내고 응답을 받을 것인가?

이러한 작업들은 모두 자바스크립트 코드가 동기식으로 실행되는 메인 스레드가 아닌 태스크 큐가 할당되는 별도의 스레드에서 수행된다.

이 별도의 스레드에서 태스크 큐에 작업을 할당해 처리하는 것은 브라우저나 Node.js의 역할이다.

즉, 자바스크립트 코드 실행은 싱글 스레드에서 이루어지지만 이러한 외부 Web API 등은 모두 자바스크립트 코드 외부에서 실행되고 콜백이 태스크 큐로 들어가는 것이다.

이벤트 루프는 호출 스택이 비고, 콜백이 실행 가능한 때가 오면 이것을 꺼내서 수행하는 역할을 하는 것이다. 만약 이러한 작업 들도 모두 자바스크립트 코드가 실행되는 메인 스레드에서만 이루어진다면 절대로 비동기 작업을 수행할 수 없을 것이다.

모던 리액트 Deep Dive에서