[위클리 페이퍼_6주차] Virtual DOM

1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요.

// 1번
let num = 1;

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

// 3번
num = 3;

// 4번
console.log(num);

1번: 변수 num을 1로 초기화

2번: 0 밀리초 후에 num을 2로 설정하는 setTimeout 함수 선언, 이 함수는 비동기로 실행되므로 setTimeout의 콜백 함수는 num = 3;이 실행된 후 실행

3번: num에 3을 할당

4번: console.log(num)은 setTimeout의 콜백 함수가 실행되기 전에 실행되므로 출력 결과는 3임

2. 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

Virtual DOM이란?

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용
여기서 DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환해 줌

리액트가 Virtual DOM을 반영하는 절차

특정 페이지에서 데이터가 변했다고 가정했을 경우.

리렌더링: 데이터가 업데이트되면, 전체 UI를 Virtual DOM에 리렌더링
비교 (Diffing): 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교
패치 (Reconciliation): 바뀐 부분만 실제 DOM에 적용

Virtual DOM을 사용하는 주된 이유는 실제 DOM 조작의 비용을 줄이고, 결과적으로 애플리케이션의 성능을 향상하기 위함
위 사진처럼, Virtual DOM은 수정 사항이 여러 가지 있더라도 이전 상태 값과 수정 사항을 비교하여 달라진 부분만 DOM에 한 번에 전달하여 딱 한 번만 렌더링을 진행

따라서 작은 규모의 레이아웃(리플로우)이 여러 번 발생하는 것보다 큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타냄