Virtual DOM

DOM

(Document Object Model)

• Elements = html 하나하나의 요소
• Document = 이 모든 요소들을 담고 있는 웹페이지

DOM이란
1. 이렇게 웹페이지에 들어있는 html element들을 트리형태구조로 표현한것.
2. 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미.

📑가상돔 Virtual DOM

리액트는 가상돔을 사용하여 실제돔을 조작하는 일을 엄청나게 빠르게 해준다
가상돔 = 실제 돔과 같은 내용을 담고 있는 복사본
( 이 복사본은 실제돔이 아닌 JS객체형태로 메모리안에 저장되어있다)
가상돔은 복사본이기 때문에 실제 돔안에 들어있는 모든 elements들과 속성들을 똑같이 가지고 있다

굳이 복사본을 만드는 이유? → 리액트는 가상돔을 통해서 우리가 실제돔을 조작하는 속도를 획기적으로 줄여준다

DOM 조작

돔의 내용을 조작해줄때마다 브라우저화면의 UI를 변경하는것은 꽤나 복잡하고 시간이 걸린다 (비효율적)
가상돔은 항상 2개의 가상돔을 가지고 있다

다시 말해 DOM은 HTML과 스크립팅언어(Javascript)를 서로 이어주는 역할을 하고 있다.

📌가상돔이 나오게 된 이유

여기서 h1이라는 태그의 텍스트 색상을 빨간색으로 바꾸고자 한다면 우리는 document.getElementById('h1의 id')라는 DOM 접근 메서드를 이용할 것이다.

이 방식은 두 가지 측면에서 아쉬운 점이 있다.

1. 메모리 누수와 속도

만일 개발자가 h1 태그를 찾는 코드를 변수에 저장하지 않고 매번 h1에 관련된 접근 메서드를 사용한다면 매단계마다 저 수많은 document 객체들을 전부 훑으며 찾는 현상이 발생되고 이것은 곧 메모리 누수로 이어진다.
또한 h1의 변화가 일어난다면 (DOM의 변화가 일어난다면) css를 다시 연산하고 레이아웃을 구성하고 웹페이지를 다시 그려주는 데에서도 시간이 든다.

2.코드량

다른 하나는 객체를 찾기 위해 작성하는 코드가 번잡스러울 수 있다. id라는 고유성을 침해 당하지 않기 위해 해당 태그의 네이밍을 정할 때 심사숙고해야 할 것이고 해당 태그를 접근하기 위해 작성해야 하는 메서드가 그리 짧지가 않다. (document.getElementById('h1의 id'))

html 마크업을 시각적이 형태로 변환하는 시간(css가 적용되고 수정되어 반영되는 시간)이 드는 것은 어쩔 수 없지만, 최소한의 DOM 조작을 통해 작업을 처리한다면 개선하고자하여 가상돔이라는 개념을 도입한다.

📑가상돔(Virtual DOM)이란?

실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다.

실제 (무거운)돔의 가벼운 사본 같은 개념

🎶리액트가 가상돔을 반영하는 절차

특정 페이지에서 데이터가 변했다고 가정했을 때, 리액트를 이용해 돔을 업데이트시키는 절차는 다음과 같다.

1. 변화가 일어났다. 변화된 버전을 가상돔으로 바꾸자.
   • 데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.
2. 가상돔끼리 비교하자.
   • 변화 전의 가상돔과 변화된 가상돔을 비교한다.
3. 바뀐 부분만 적용하자.
   - 바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한 번만 이행된다.
   (ex. 네비게이션(컴포넌트)을 열었을 때 특정 영역(컴포넌트)이 빨갛게 변하면서 위치가 변경되는 경우의 레이아웃 계산이 일괄로 단 한 번만 이행)

• 가상돔생성
  리액트는 state가 변경될 때마다 화면이 새로 렌더링된다.
  렌더링이 발생될 상황일때마다 새로운 내용이 담길 가상돔을 생성한다 (실제 브라우저에 담기기전에)
• Difffing
  렌더링 이전에 화면내용을 가지고 있는 첫번째 가상돔과 업데이트 이후의 내용을 담고 있는 두번째 가상돔을 비교해서 정확히 어느 elements들이 변했는지 찾아낸다 (엄청효율적)
• 재조정(Reconsiliation)
  딱 바뀐 부분만 찾아내서 실제 브라우저 화면에 적용
  재조정이 효율적인이유: Batch update
• Batch update(집단업데이트)
  변경된 모든 element들을 한번에 동시에 적용시켜주는 것.

(만약 list안에 10개의 항목이 바뀌었다면 실제돔을 10번 반복해서 조작하는 것이 아니라, 한꺼번에 바뀐 모든 부분들을 집단으로 조작시켜준다. 돔조작에 있어서 가장 비용이 많이 드는 부분은 화면을 그려주는 작업.
Batch update는 변경된 부분을 하나하나 따로따로 그려주는 것이 아니라 변경된 내용을 한번에 다 받아와서 실제돔에 한꺼번에 적용 → 빠르고 효율적)

🌼정리

1. 리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이다.
2. 그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.
3. 리액트는 항상 두 개의 가상돔을 갖고 있다.
4. 첫번째 가상돔은 변경 이전의 내용을 담고 있고, 두번째 가상돔은 병경 이후에 보여질 내용을 담고 있다.
5. 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 element들이 바뀌었는지 효율적으로 비교하여 파악한다. 그리고 이러한 과정을 Diffing이라고 부른다.
6. Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로써 실제 DOM에 한번에 적용시켜준다.
7. 그리고 이러한 과정을 Reconsiliation, 재조정이라고 한다.

---

https://hihiha2.tistory.com/47
https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90