[React.js] DOM이란? Virtual DOM이란?

브라우저 - 렌더트리를 보여준다.

렌더트리 - DOM + CSSOM ( 스타일 적용 )

스타일 적용후, 화면에 보이지 않는 부분은 렌더트리에서 제외된다.

- display : none 스타일이 적용된 element는, 렌더트리에 포함되지 못한다.

- visibility : hidden 스타일이 적용된 element는, 렌더트리에 포함되어 실제화면에서 공간을 차지한다.

 

DOM이란?

Document Object Model, 문서 객체 모델

HTML의 여러 구성요소(노드)에서 유효한 것만 선택해, 트리 형식으로 구성한 표

DOM의 구성

DOM안의 모든 것들은 객체 ( 클래스로 만들어진 것, Node 라고 부름 )

ex) <a>, <h1>, "Text" ...

 

렌더링이란?

[웹] 렌더링(Rendering)이란?

 

Virtual DOM이란?

DOM을 나눠서 분리해서 여러개의 가상DOM으로 만들어 놓은 것

변경 사항을 DOM에 직접 적용하지 않고, 가상DOM에 적용한후, DOM에 적용했다.

 

1. 가상DOM에 변경 사항 한번에 모음 (버퍼링)
2. DOM과 가상DOM비교
3. 차이점이 있는 부분만 변경
4. 렌더링

 

Virtual DOM 사용 예시

10개의 <li>태그 변경

DOM <li>1개 바꾸고, 10번 렌더링

Virtual DOM <li> 10개 바꾸고, 1번 렌더링

* 렌더링 수를 확연하게 줄일 수 있다.