[ React ] React 동작 원리( DOM, Virtual DOM)

DOM ( Document Object Model )

DOM은 Document Object Model의 약자로 HTML, XML, 문서의 프로그래밍 interface로 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 

DOM은 구조화된 nodes, property, method를 갖고있는 tree형태의 objects로 문서를 표현한다. 

 

DOM

동적으로 웹 페이지를 변경하게 되면서 많은 CSS, JS 연산이 발생하게 되는데, 매번 이러한 변경이 발생할때마다 DOM을 새로 그려주게 되면 시간 소모가 많이 발생하게 된다. 결과물은 동일하게 유지하되 변경되는 DOM을 최소한으로 하여 시간을 단축하는 방법으로 React는 Virtual DOM이라는 개념을 도입하여 DOM 처리과정을 최적화시켰다.

 

Virtual DOM ( Virtual Document Object Model )

Virtual DOM은 Real DOM의 복사본과 같은 존재이다. Virtual DOM이 존재하는 이유는 Real DOM에는 Browser가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업 자체가 무겁기 때문이다.

 

Virtual DOM에는 원래 DOM에 존재하는 모든 객체에 대해 React Virtual DOM에 해당 객체가 존재한다. 그러나 document의 layout을 직접 변경할 수 있는 권한이 Virtual DOM에게는 없다. 

 

React에서 Virtual DOM을 이용하여 Real DOM을 처리하는데, Virtual DOM에서 상태가 변경되면, 해당 상태변화와 실제 변경된 부분을 확인하고, DOM API를 호출하여 Real DOM에 해당 변경된 부분을 반영하여 Rerendering해준다. 

 

 

 

 

 

출처 :

 

https://reactjs.org/docs/reconciliation.html

https://velog.io/@gwak2837/React-Virtual-DOM-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

https://www.geeksforgeeks.org/reactjs-virtual-dom/

http://www.tcpschool.com/javascript/js_dom_concept

https://buyandpray.tistory.com/79