[7주차] 리액트 Virtual DOM이란?

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

---

DOM

• Document Object Model
  • Document : 하나하나의 HTML element를 담고 있는 웹페이지
• HTML element를 tree 형태로 표현한 것
• 브라우저는 이 DOM을 분석하여 우리에게 페이지를 띄워주는 것이다.
• DOM 조작
  • DOM이 제공하는 API를 통해 DOM tree에 접근하고, 원하는 element를 조작하는 것
  • ex. getElementById, querySelector

Virtual DOM

• 실제 DOM의 복사본
• JS 객체 형태로 메모리에 저장되어 있다.
• virtual DOM은 브라우저에 있는 문서에 직접적으로 접근할 수 없다.
  • 즉, 화면에 보여지는 내용을 직접 수정할 수 없다.

Virtual DOM을 사용하는 이유

• 리액트는 항상 2가지 virtual DOM을 가진다.
  • 렌더링 이전 화면 구조를 나타낸 virtual DOM
  • 렌더링 이후 화면 구조를 나타낸 virtual DOM
• 리액트는 Virtual DOM을 사용함으로써 효율적인 방식으로 렌더링을 하게 된다.
  • 성능 향상
    • JS 객체(virtual DOM)에 접근하는 것보다 직접 DOM에 접근하는 게 느리기 때문이다.

Re-Rendering 동작 원리

1. 리액트는 state가 변경될 때마다 re-Rendering을 하게 된다.
2. 이때, re-Rendering이 발생하면 우선 업데이트 이전, 이후의 내용을 담고 있는 Virtual DOM이 생성된다.
3. 두 virtual DOM을 비교하여 정확히 어떤 element가 변화했는지 확인한다. → Diffing
4. 실제 DOM에는 3번에서 찾은 실제로 변화가 있는 element만 업데이트하는 방식으로 렌더링이 된다. → Reconciliation