자바스크립트는 싱글쓰레드로 동작하는데 어떻게 비동기처리를 하는지에 관해 간단히 적어본다.
출처:https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=bunggl&logNo=221611924215
위 그림은 브라우저 도식도이고 그 안에는 JS, Web APIs, Callback Queue, Event Loop가 있다.
자바스크립트 엔진은 싱글쓰레드이지만 브라우저의 다른 요소들의 도움을 받아 비동기 수행을 할 수 있는 것이다.
자세히 살펴보자면 먼저 JS 아래 Memory Heap과 Call Stack이 있다.
Memory Heap은 할당된 변수, 객체 등이 담기는 공간이고 Call Stack은 실행될 함수가 하나씩 들어가는 공간이다.
이렇게 Call Stack에 쌓인 함수들은 자바스크립트 엔진이 하나씩 처리하게되는데, setTimeout이나 ajax와 같이 비동기로 수행되어야 되는 함수들의 경우 Web Api로 보내게 된다.
이렇게 보내진 함수들은 web api에서 대기(ex) setTimeout이 3초 걸려있다면 3초간 대기한다)하다 콜백큐에 쌓이게 된다.
이벤트 루프는 콜벡큐와 콜스택을 보고있다가, 콜스텍이 빈 경우 콜백큐에 쌓여있는 함수들을 하나씩 가져와서 콜스택에 올린다.
즉, 동기 함수들이 모두 실행이 된 후 비동기 함수들이 차례로 실행되게 된다.
react나 vue의 경우 이렇게 ajax 요청을 통해 받아온 데이터들을 state이나 props에 넣어주게 되고 화면이 rerendering되게 된다.
