이벤트 루프 적용 예시

lim1313·2021년 9월 5일
0

TILPLUS

목록 보기
13/40

이벤트 루프 예시로 이해하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>Click to add</button>
    <script>
      const button = document.querySelector('button');
      button.addEventListener('click', () => {
        const element = document.createElement('h1');
        document.body.appendChild(element);
        element.style.color = 'red';
        element.innerText = 'hello';
      });
    </script>
  </body>
</html>

위의 코드중 button.addEventListener를 보면 element를 생성하고 document.body에 append한 다음, style을 지정해 주었다. 정상적으로 동작한다.

하지만, 코드의 흐름 상 body에 append하기 전, style을 지정해 주고 append해야 할 것만 같다.

event가 동작하는 원리는 다음과 같다.

  1. addEventListener는 click 이벤트가 실행되면 콜백함수를 Task queue에 넣는다.
  2. call stack이 비어있다면, Task queue에 있는 콜백함수를 call stack에 넣게된다.
  3. 이벤트루프는 콜 스택에 들어온 콜백함수가 모두 실행되기까지 기다린다.
  4. 콜백함수가 모두 실행되면, 이벤트 루프는 다시 순회를 시작한다.
  5. 이벤트 루프가 순회하고, render가 발생할 때가 되면 그때에는 이미 콜백함수가 모두 실행된 다음이기 때문에, style이 모두 적용된 render tree가 형성되는 것이다.
profile
start coding

0개의 댓글