DOM and Virtual DOM

 

다음은 리액트로 만들어진 사이트이다. 

re-render를 했을 때 왜 좋은 선택인가

 

이 사이트 Elements를 살펴보면 

html 태그들로 구성되어 있는 레이아웃을 볼 수 있다. 

이들을 DOM tree 라고 한다. 

Document Object Model Tree 이다. 

 

 

 

 

 

 

 

 

App 안에 3개의 children이 있다. 

이 3 children 끼리는 sibiling 이다. 

card-list 안으로 들어가면 많은 children들이 들어있다. 

 

 

 

html으로 된 Real DOM tree 로 나타내면 다음과 같은 형태로 나타낼 수 있다. 

여기서 내용을 추가하거나 변경을 하고자 할 때 

real DOM에서 직접하는 것은 어렵다. 

변경할 내용을 DOM에서 뽑아내 내용을 변경하거나

DOM에서 바꾸는 과정은 computationally expensive 하다. 

 

 

 

 

그래서 리액트가 DOM을 똑같이 복사해 간다. 

이렇게 자바스크립트로 Real DOM을 따라 똑같이 만든 DOM을

Virtual DOM이라고 한다. 

여기서 변경하거나 element를 만드는 과정을 빠르게 할 수 있다. 

 

 

 

처음 만들어진 Virtual DOM은 스냅샷으로 

남겨 놓고 카피를 하나 더 만들어 

거기서 변경을 한다. 

Snapshot으로 남겨 놓는 이유는

Real DOM이 어떻게 생겼는지 자바스크립트로 된 것을 비교 대상으로 남겨 놓기 위함이다. 

 

 

 

 

여기서 만약 search-box에 "lea"를 검색이 들어오면 

DOM 변경을 해야하는 상황이다. 

 

Virtual DOM Copy에서 

맨 처음은 APP 컴퍼넌트가 읽히고,

card-list로 내려오며

setState에 여러 번 render 과정을 거쳐 

card-list에서 

"lea"가 들어간 Card를 찾는다.

 

App과 Card-list가 업데이트되고 

"lea"가 들어간 Card만 남고

나머지 Card는 unMount되어 copy DOM tree에서 지워진다.

 

 

이제 SnapShot과 Copy를 비교해서

어디가 바뀌었는지 확인한다. 

 

 

 

그리고서 Real DOM에 최종 변경된 사항을 적용을 한다. 

 

 

 

여러 복잡한 과정은 Virtaul DOM Copy에서 이뤄지고 

Real DOM에서는 변화된 결과만 받는다.