[6주차] 동기-비동기 코드 실행순서 / Virtual DOM

6주차 위클리 페이퍼 과제

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

// 1번
let num = 1;

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

// 3번
num = 3;

// 4번
console.log(num);

1번) console.log(num); // 1

--> 변수 선언과 초기화가 됐기에 1이 출력된다.

 

2번) 비동기 함수이다.

--> setTimeout 함수 안에서 console.log(num)을 작성하면 2가 출력된다.

 

3번) let의 재할당

--> 식별자 let은 재할당이 가능하므로, console.log(num)을 하면 3이 출력된다.

 

4번) 최종적으로 3번과 같다.

--> 1번과 3번이 출력되고, 비동기 2번이 출력되는 형태로 착각할 수 있다.

그러나 console.log(num);도 동기코드이므로 3이 출력된다.

---

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

위클리 페이퍼 작성을 하다가 DOM과 파이버(Fiber)까지 공부하게 됐다. 긴 글이라 아래 링크 참고!

https://young-taek.tistory.com/229

DOM / Virtual DOM / 파이버(Fiber)