[React] Virtual DOM 과 DOM의 차이점.

돔(Document Object Model) = 구조화된 텍스트

 

그러므로 HTML은 단순 텍스트일지라도 돔은 메모리에 값을 가지고 있는 표현식이다.

ex)하나의 프로그램에 다수의 프로세스 -> 하나의 페이지에 여러개의 탭, 하나의 HTML안에 다수의DOM

 

HTML DOM은 노드를 탐색하거나 수정할 수 있는 API를 제공한다.(DOM Tree의 노드)

돔은 getElementById 혹은 removeChild와 같은 메소드를 포함한다.

 

우리는 웹 페이지의 컨텐츠를 동적으로 수정하고 싶을 때 DOM을 수정한다.

var item = document.getElementById("My")
item.parentNode.removeChild(item);

document는 root node의 추상화된 개념인 반면에 getElementById, getElementByClassName, parentNode, removeChild와 같은 메소드는 HTML DOM API에서 비롯되었다.

 

---

HTML DOM은 HTML document의 구조와 같은 트리 구조로 되어있다.트리구조는 탐색하기 쉬우므로(쉽기만하고 빠르지는 않다) 사용성이 좋다.

 

오늘날의 Web App은 점점 크고 다양해지며 DOM Tree는 점점 더 거대해진다. 커지면 커질수록 수정하는 일이 힘들다.

=> 이벤트 핸들러를 다뤄야 하는상황에서 문맥을 제대로 찾지 못하면 코드의 아주 깊숙히 파고 들어야한다.

이는 시간 소모가 크고 버그가 발생하기 쉰다.

 

===>리액트는 DOM Tree를 일일히 탐색하는 방법 대신에 컴포넌트가 어떻게 구성되어야 할지 간단하게 정의만 해주면 된다. 낮은 수준의 작업은 react가 대신 해준다.(HTML 돔 API를 호출하는 작업 등.) 컴포넌트는 자기가 어떤일을 해야할지에 대한 정의만 해주면 된다. 하지만 아직까지는 퍼포먼스 이슈를 해결해주진 않는다.

여기서 등장하는게 Virtual DOM의 개념이다.

 

 

---

Virtual DOM

 

가상돔은 리액트에서 나온 개념은 아니지만 리액트는 자동으로 이 개념을 사용하고 사용자들에게 제공합니다.

 

Virtual DOM은 HTML DOM의 추상화 개념인데 돔이 이미 추상화 개념이기 때문에 추상화의 추상화 개념이고 매우 가벼우며 브라우저 스펙의 구현체와 분리되어있다.

 

리액트 일부의 HTML DOM의 간소화된 복사본 느낌. 가상 돔은 리액트가 가상 개념과 진짜 돔(느리고 브라우저 스펙에 따르는)개념 간의 계산을 가능하게 해준다.

 

JSX부분이 순수 HTML과 거의 같게 보이는 이유로 일반 돔과 가상 돔 간의 큰 차이는 없는것처럼 보인다.

 

대부분 경우에 HTML코드가 JSX로 작성되어 있는데 이걸 정적인 리액트 컴포넌트로 만들고 싶을 때

1. render부분에 HTML을 반환해주고

2. class 속성을 className으로 바꿔줘야 한다.(class는 JS에서 사용)

 

++차이점으로 key, ref, dangerouslySetInnerHTML은 돔에 없는 속성이다.

 

---

React elements는 가볍고 state가 없고 immutable하며 돔 요소의 가상 표현식이다.

이 개념은 가상 돔 안에 포함되어 노드를 생성하는데 immatable이 비교와 업데이트를 빠르게 해주는 리액트 퍼포먼스의 핵심이다.

 

ReactElement는 React.createElement로 HTML태그라면 어떤것이던 될 수 있다.

 

하지만 상태값이 없으므로 크게 쓸모가 없어서 나온것이

 

React Component이다.

 

React.createClass메소드를 사용하고 state가 있는게 차이점이다.

HTML스러운JSX블럭은 상태값을 가질 수 있는 render메소드를 반환하고 가장 좋은 것은 state가 바뀔때마다 컴포넌트가 다시 그려진다는 점이다.

=> 동적인 HTML디자인의 매우 좋은 도구이고 Components가 가상돔에 직접접근할 수는 없지만 ReactElement로 쉽게 컨버팅해 사용한다.

 

 

ReactComponent -> ReactElement => 빠르고 쉽게 비교, 업데이트 작업 후 가상 돔에 삽입된다.

리액트가 가상돔의 수정 내역을 알게되면 수정된 부분은 low-level(HTML DOM)으로 바뀌고 일반 돔 안으로 삽입된다.

또한 이 코드는 브라우저에 의해 최적화 된다.