이미 한 번 간단히 정리했지만, DOM과 VDOM에 대해 조금 더 알아보자!
웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용함. DOM은 트리 형태라서 특정 노드 찾기, 수정, 제거, 삽입이 가능하다.
하지만, 문제점도 있다. DOM은 동적 UI에 최적화되어 있지 않다는 것! (HTML은 자체적으로는 정적이지만 자바스크립트를 사용해 동적으로 만들 수 있음.)
큰 규모의 웹 애플리케이션의 경우 수많은 데이터가 로딩되는데, 그럴수록 각 데이터를 표현하는 요소(element)의 단위는 당연히 많아지게 된다.
이처럼 큰 규모에서DOM에 직접 접근해 변화를 준다면? 성능 이슈가 발생하기 시작... 대표적으로 느려지는 문제가 있다.
DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그린다. 업데이트가 너무 잦으면 성능이 저하될 수 있는데, 이런 문제를 해결하려면 DOM을 조작해야 한다. 단, DOM을 최소한으로 조작해 작업을 처리해야 함.
그런데!!! 우리의 리액트는 Virtual DOM(VDOM) 방식을 사용해 DOM 업데이트를 추상화해서 DOM 처리 횟수를 최소화시켜 효율적으로 진행 가능하다.
(+) "DOM은 느리다."라는 말은 정확하지 않다고 한다. 사실 DOM 자체는 빠르다고 함!
❓🤔 그런데 왜 저런 말이 나온걸까?
DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리할 때의 성능과 비교하여 다르지 않음.
단, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 시간이 허비되다 보니 저런 말이 나온 것...
(+) 그리고 VDOM을 사용한다고 해서 무조건 빠른 것은 아니다.
// 리액트 매뉴얼
우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기굳이 리액트를 사용하지 않아도 코드 최적화를 하면 DOM 작업이 느려지는 문제를 개선할 수 있음. 매우 간단한 작업은 되려 리액트를 사용하지 않았을 때 성능이 좋아지기도 한다고...
리액트와 VDOM이 제공할 수 있는 것은 바로 업데이트 처리 간결성으로 UI를 업데이트하는 과정에서 생긴 복잡함을 해소하고, 더욱 쉽게 업데이트에 접근할 수 있다.
결국 적절하게 사용해야 된다는 것!
