[리액트를 다루는 기술] 리액트의 특징

Virtual DOM

https://wonillism.tistory.com/214

[Javascript] DOM 이란?

Virtual DOM을 알아보기전에 이전에 알아보았던 DOM을 짚고 넘어가자.

 

DOM에는 치명적인 한 가지 문제점이 있다. 바로 동적 UI에 최적화되어 있지 않다는 것이다. HTML은 자체적으로 정적이므로 자바스크립트를 사용하여 이를 동적으로 만들 수 있다.

하지만, 요즘 흔히 접하는 큰 규모의 웹 애플리케이션들을 보면 스크롤바를 내릴수록 수많은 데이터가 로딩된다. 요소 개수가 몇 백개, 몇 천개 단위로 많을때 DOM에 직접 접근하여 변화를 주다보면 성능 이슈가 조금씩 발생하기 시작한다.

 

DOM자체는 빠르지만 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 한다. 이 과정에서 시간이 허비되는 것이다.

 

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

 

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 마치 실제 DOM의 가벼운 사본과 비슷하다.

 

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟는다.

 

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 잇던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.