Virtual Dom?

Virtual Dom
리액트의 주요 특징 중 하나

Dom이란?
객체로 문서 구조를 표현하는 방법 XML이나 HTML로 작성

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용하지요. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하나 원하는 곳에 삽입할 수 있습니다

DOM에는 치명적인 문제가 있다.
바로 동적 UI에 최적화되어 있지 않다는 것입니다
HTML은 자체적으로 정적이다
이걸 JS으로 동적으로 만들수 있다

DOM자체는 빠르다 단, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고 페이지를 리턴하는데 이과정에서 시간이 허비 된다

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화 함으로써 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행

Virtual DOM

리액트에서 테이터가 변하여 웹 브라우저에 실제 DOM을 덥데이트 할때는 다음 세가지 철차가 필요

1.데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다
2.이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3.바뀐 부분만 실제 DOM에 적용

오해...

Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른건 아니다

리액트 메뉴얼에는 이런 문장이 있다고 하네요

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기