DOM 객체를 조작하는 작업은 번거롭다. 하나의 DOM에 여러 개의 이벤트 핸들러가 바인딩되어 있고, 각각의 이벤트들의 동작에 따라 DOM이 동적으로 변환되어야 한다면 이는 예측하기 어렵고 관리가 어려워 진다.
이러한 문제점들을 해결하기 위해 Ember, Backbone, AngularJS와 같은 프레임워크들이 등장하였다.
자바스크립트의 특정 값이 변할 경우 DOM의 속성이 변하도록 하여 업데이트 작업을 간소화해주는 방식이다.
하지만 리액트의 경우에는 조금 다른 발상으로 만들어 졌다. 리액트는 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 업데이트 하는 것이 아니라, 다 날려버리고 새롭게 보여준다는 아이디어에서 개발이 시작되었다.
모든걸 다 날리고 새로 만들면 속도가 느려질 것이기 때문에 이를 해결하기 위해 Virtual DOM을 이용한다.
Virtual DOM은 브라우저에 보여지지 않고 메모리상에 JavaScript 객체로 존재하는 DOM이다. DOM 조작에 의한 비효율적인 렌더링을 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링을 한다. 그리고 리액트의 비교 알고리즘을 통해 차이가 있는곳을 파악하여 실제 DOM에 패치한다. 이를 통해 빠른 성능을 제공한다.
# 왜 Virtual DOM인가
[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG
리액트를 지난 2년간 사용하면서도 막상 말끔하게 설명하라고 하면 어려웠던 주제, 원래 번역글은 잘 안쓰지만 글 자체가 구성이 잘 되어있어서 글을 번역해보았습니다. 원본: https://hashnode.com/p
velopert.com