비동기와 Virtual DOM

1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 이유

// 예시
// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num); // num = 3;

• 1번에서는 num이라는 변수를 선언하고 할당합니다.
  2번에서 setTimeout이라는 비동기 함수를 사용하여 num = 2 로 재할당 하지만 비동기 함수이기 때문에
  3번인 num = 3로 재할당 후
  4번 console.log(num)으로 3이 출력됩니다.
  2번을 제외한 나머지 코드들은 동기 코드이기 때문에 비동기 함수인 2번 코드가 제일 마지막으로 실행됩니다.

2. 리액트에서 Virtual DOM이 무엇인지, 사용하는 이유

💻리액트 Virtual DOM
리액트 Virtual DOM은 실제 DOM과 똑같이 생긴 가상 DOM을 생성합니다. 리액트는 렌더링 이전 화면 구조를 나타내는 가상 DOM과 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상 DOM을 갖고 있습니다.

여기서 리액트는 기존 DOM와 변경된 페이지 DOM의 변경사항을 비교해서 변경된 요소만 따로 변경을 하여 작업속도가 빠르다는 장점이 있습니다. 그리고 변경된 모든 작업들을 한 번에 모아서 변경을 해주는 Batch Update를 통해 성능을 최적화 할 수 있습니다.