[코드잇 스프린트 풀스택 4기] React Virtual DOM

Virtual DOM(가상돔)

리액트에서는 실제 DOM(Document Object Model)을 조작하는 것이 아니라 가상의 DOM을 만들어 기존과의 차이점을 비교한 후 달라진 부분이 있을 경우 다시 렌더링하는 방식을 사용한다.

리액트는 내부적으로 렌더링된 UI를 자바스크립트 객체로 관리하는데 실제 DOM노드를 생성하거나 접근해서 변경하는 것보다 이 자바스크립트 객체로 표현된 DOM 트리를 조작하는 것이 훨씬 빠르기 때문이다.

 

React의 Virtual DOM 비교 단계

1. UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링한다. (실제 화면상이 아님)

2. 지금 렌더링한 Virtual DOM과 이전의 Virtual DOM을 비교해 차이를 계산한다.

3. 변경된 부분을 실제 DOM에 반영한다.

 

React의 얕은 비교

배열이나 객체 등 참조값을 가지는 자료형의 경우 내부의 속성을 변경하더라도 참조값이 같은 경우 이를 감지하지 못한다. 그래서 이런 자료형들은 배열이나 객체를 복사하여 사용해야 하며 이를 setState에 담아주면 변경을 감지할 수 있다.

 

Virtual DOM의 장단점

1. 장점

렌더링 성능 향상과 일관정, 크로스 플랫폼 지원 등

2. 단점

Virtual DOM 객체를 위해 메모리를 추가로 사용, 복잡성 증가, 작은 규모의 애플리케이션에는 오버헤드