[React] React Virtual DOM 이란

리액트를 가장 단순하게 한 단어로 표현하고자 하면 "바꿔치기" 라고 설명할 거 같다.

(변화 노노...! 그 대신에 데이터가 바뀌면 그냥 뷰를 날려버리고 새로 만들자..!)

 

기존의 view 를 변화시킬 때 일련의 과정, DOM 에서 어느 부분 인지를 찾고 그 부분에서 어느 요소가 어떻게 변했는지를 알아보고 이를 변경하고 하는 등의 과정들을 생각하면서 이를 어떻게 바꿔줘야 하는가 등의 고민을 하기보단 

React 라이브러리를 통해 그냥 통체로 변화된 view 로 갈아치울 수 있기 때문이다.

 

그런데 웹 브라우저 환경에서 (수 많은 요청들이 오고가는 상황에서..) 이렇게 통체로 view를 갈아치우기엔 엄청난 리소스가 필요하며 이것을 가능하게 한다 한들 브라우저의 성능저하, pc의 과부하 등의 문제가 있을 수 있기에 이를 해결하기 위해 나온 개념이 바로 "Virtual DOM" 이란 것이다.

 

Virtual DOM, 가상의 DOM 을 통해 웹 브라우저에서 변화가 일어나게 되면 javascript로 이뤄진 가상의 DOM 한번 렌더링 하고 기존의 있던 Real DOM 과 비교. 변경된 부분만을 바꿔치기 하는 식의 방식을 통해 바꿔치기의 대한 문제점을 해결할 수 있다.

 

최조 Model 을 통해 View 에 그림을 그린다 -> Real DOM 에 그린다.
브라우저 요청 혹은 유저의 요청 -> Model을 통해 내용을 가상 DOM에 그린다

변화된 내용을 view에 그린다 -> Real DOM 과 Virtyal DOM 과 비교 후 변경된 부분만을 고쳐 새로운 view로 대체

 

이러한 개념을 가지고 나온 것이 React 이며 관련된 상세 내용은 아래의  URL로 확인할 수 있다.

https://www.youtube.com/watch?v=BYbgopx44vo