React를 다루는 기술 02 - React의 특징

React는 성능을 높이기 위해 렌더링 한 객체를 DOM과 비교하여 업데이트 된 부분만 다시 렌더링하며 이 때 서로 비교하기 위해 사용하는게 VirtualDOM이다.

DOM에 대해서

VirtualDOM에 대해 얘기하기 전에 우선 DOM부터 짚고 넘어가자면 DOM은 Document Object Model의 약자로 웹페이지를 구성하고 있는 요소이며 트리구조로 되어있다.
HTML이나 XML로 작성하고 객체로 문서구조를 표현하는 역할을 하며 동적인 구조에 약하다.

DOM은 느리고 JavaScript는 빠르다는 편견이 있는데 사실 DOM은 빠르다.
다만 웹페이지 상에 많은 수의 오브젝트가 존재하고 그 중 하나가 변경되는 경우 DOM은 브라우저를 통해 전체 웹페이지를 다시 그리게 된다.
이 때 브라우저가 CSS를 계산하고 레이아웃과 페이지를 그리는데 시간이 걸리기 때문에 느려보이는 것이다.
때문에 React에서는 전체 페이지를 다시 그리는 것이 아니라 변경된 부분만 그리게 하여 성능을 향상시키기 위해 최대한의 효율이 좋게 기존의 DOM과 변경된 DOM을 비교할 필요가 있었고 이에 사용되는 것이 VirtualDOM이다.

VirtualDOM은?

VirtualDOM은 이러한 DOM의 추상화 개념이다.
먼저 초기 렌더링 시 작성된 DOM을 추상화하여 VirtualDOM으로 만든다.
그리고 업데이트가 이루어져 다시 렌더링이 진행되고 새로운 VirtualDOM이 생성되었을 경우 이전에 만들어진 VirtualDOM과 비교하여 업데이트 된 부분을 찾아 DOM의 렌더링을 진행한다.

React를 써도 결국 웹페이지를 전부 다시 렌더링하는 것은 같지만 DOM이 아닌 VirtualDOM은 추상화 된 DOM이기 때문에 더 가볍게 비교가 가능하다.
그러나 VirtualDOM을 쓰는게 무조건 빠른건 아니다.

더 가볍긴하지만 어찌되었건 렌더링을 진행하고 비교한 후에 DOM이 변경된 부분에 한해서 렌더링을 하는 것이다.
결국 렌더링 - 비교 - 렌더링의 구조를 거치기 때문에 페이지에 변화가 적거나 간단한 값만 표시되는 페이지에 VirtualDOM을 쓰면 오히려 성능이 나빠진다.

그러므로 변화가 지속적으로 이루어지는 대규모 어플리케이션에 적합하다.

기타 특징

React는 프레임워크가 아닌 라이브러리이다.
오로지 View에 대한 부분만을 지원하기 때문에 외부 라이브러리 외에도 다른 프레임워크와 혼용도 가능하다는 장점이 있지만
반대로 이것은 다른 기능이 필요하면 직접 만들거나 외부 라이브러리를 사용해야한다는 단점이 되기도 한다.
다만 이 부분은 이미 React를 사용하는 수많은 개발자들이 필요한 기능들을 라이브러리로 제작하여 공유하고 있기 때문에 직접 만드는 경우는 없다고 봐도 무방하며 외부 라이브러리들에 대한 관리만 잘 하면 별 문제없는 부분이다.

출처자료

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=209354690 (리액트를 다루는 기술(개정판))