[React] Virtual DOM

양방형 바인딩을 통해 뷰와 모델의 값을 변경시켜주는데 이런 변화는 복잡한 기능이다.

예를들어 특정 이벤트가 발생했을때 모델의 변화를 일으키고 변화를 일으킴에 따라 어떤 돔을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야하는데 이런 로직은 프레임워크나 라이브러리에서 정해준다.

 

리액트는 변화가 생기면 그냥 mutation 하지 말고 그냥 데이터가 바뀌면 기존 뷰를 날려버리고 새로 만들어 버리면 어떨까 ? 하는 생각을 가지고 리액트가 개발되었다.

 

하지만 브라우저는 dom 기반으로 작동 하기때문에 페이지가 새로운 view를 만들어 버리려면 성능적으로 문제가 발생한다.

그래서 존재하는 것이 Virtual Dom 이다. 이는 가상의 돔으로 변화가 일어나면 실제로 브라우저 돔에 새로운것을 넣는 것이 아니라 자바스크립트로 이뤄진 가상의 돔에 렌더링을 한 후 기존의 돔과 비교한 후 정말 변화가 필요한 곳에 업데이트를 해준다.

 

모델을 가지고 실제 돔에 그린다. 이때 모델에서 실제 변화가 발생하면 가상의 돔에 그린다. 그리고 실제 돔과 가상의 돔을 비교한 후 변화가 있는 부분을 알아내고 그것을 특정 부분에다 patch를 한다.

 

추천 영상 : https://youtu.be/BYbgopx44vo