[React] DOM, Virtual Dom (가상 돔) 이란

- DOM (Document Object Model : 문서 객체 모델)

브라우저에서 다룰 HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것이다

출처 : https://www.w3schools.com/js/js_htmldom.asp

웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체이고, 이 객체를 이용해서 웹페이지 구성요소에 접근 및 제어 할 수 있다.

DOM에 변화가 생기면, 노드들을 재생성하기에 모든 요소들의 스타일이 다시 생성된다.

복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생하고, 그만큼 변화를 적용하기 위해 브라우저가 연산을 많이 하기 때문에 PC 자원을 많이 소모하고 프로세스를 비효율적으로 만든다.

 

이러한 문제점들로 인하여 Virtual DOM이 나온다.

 

- Virtual DOM 

변화가 일어나면 가상돔에 적용을 시키고, 연산이 끝나고나면 최종적인 변화를 DOM에 적용시켜주는 역할을 한다.

 

결론은 DOM에 접근하여 조작을 하면 많은 연산이 발생 -> 가상 돔에 먼저 적용시키고 한번에 적용 -> 가상돔과 돔을 비교해서 다른 부분 적용 -> 많은 연산을 줄일 수 있다.

 

- React에서 Virtual DOM

리엑트에서 setState를 하면 랜더링이 된다.

setState를 다섯번하면 다섯번 랜더링 된다.

한번 setState를 할때 여러곳이 한번에 바뀌는것이 Virtual DOM 에 관한 내용이다.

 

리엑트를 사용하기전 jsp등에서 ajax를 사용하여 페이지를 새로고치지않고 데이터 변경을 하였는데,

너무 많은 부분을 처리하기에는 제한적이였다. 그렇기에 리엑트가 나온 배경이 됐다.