리액트의 virtual DOM은 왜 유용한 방식인가요?

Question

리액트를 쓰면 DOM을 ‘추상화한다’고 하는데 개념이 어렵네요... 뷰를 추상화한다는 게 어떤 의미이고, 이 방식이 왜 유용한지에 대해 쉽게 이해할 수 있도록 설명해 주시면 감사하겠습니다!

Answer 1

React.js, Vue.js 둘다 Virtual DOM 을 사용하는 것으로 알고 있습니다.

Virtual DOM을 사용하는 이유중 하나가 빠르게 화면을 그리기 위한것으로 알고 있습니다.

예를 들어 컴포넌트가 수정되었을 경우 다시 랜더링을 해야할 경우 Virtual DOM을 사용하지 않는 다면 랜더링을 하면서 연산을 해야하지만 Virtual DOM을 사용하게되면 Virtual DOM에서 이미 연산을 했기 때문에 랜더링시 연산이 줄어 들기 때문에 속도가 더 빠른 것으로 알고 있습니다.

Answer 2

안녕하세요

Virtual DOM 은 실제 UI에 보이는 DOM이 아니라 메모리에 표현하는 거라고 보면 될 거 같습니다.

메모리에 DOM을 표현하고 react가 원하는 타이밍에 실제 DOM에 표현을 하게 되는데요.

화면에 변경이 있을 때마다 UI를 다시 그리기 보다, 사람이 알아차릴 수 없을 정도로만 react에서 다시 그리게 됩니다.

예를 들어 휴대폰같은 작은 해상도에서 60프레임이나 120프레임이나 구분을 잘 못 하는데 굳이 120프레임으로 표현할 필요가 없는 것과 같습니다.

화면의 변화가 많지 않은 경우에는 오히려 Virtual DOM이 더 불리한 경우도 있습니다. 그러나 화면의 변화가 많지 않기 때문에 차이는 미미합니다.