DOM의 문제점

<aside> 👉🏿 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다.

</aside>

DOM이란?

<aside> 👉🏿 Document Object Model의 약자.

즉 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML으로 작성.

</aside>

Untitled

<aside> 👉🏿 DOM의 치명적인 문제점

동적 UI에 최적화되어 있지 않음.

HTML은 자체적으로 정적인데 Javascript로 동적으로 만들 수 있는 것.

큰 규모의 프로젝트에서 DOM에 직접적으로 접근하여 변화를 주다 보면 성능 이슈가 발생한다.

</aside>

<aside> 👉🏿 해결방법

DOM을 조작할때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 잦으면 성능이 저하됨

DOM을 최소한으로 조작하는 방법으로 개선할 수 있다.

따라서 리액트에서는 Virtual DOM을 사용하여 DOM 업데이트를 추상화하여 DOM 처리 횟수를

최소화하고 효율적으로 진행.

</aside>

<aside> 👉🏿 Virtual DOM을 사용하면 직접 DOM에 접근하는 대신 자바스크립트 객체를 구성하여 사용.

아래 절자로 리액트가 DOM에 업데이트