1. Virtual DOM

리액트의 주요 특징은 Virtual DOM을 사용하는 것.

DOM

DOM은 Document Object Model의 약어이고
객체로 문서 구조를 표현하는 방법이다.

웹브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다.
DOM은 트리형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다보면 성능 이슈가 조금씩 발생한다.
DOM 자체는 느리지 않지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 하는 과정에서 시간이 허비된다.

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

Virtual DOM

Virtual DOM을 사용하면 실제 DOM을 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

리액트에서 데이터가 변해서 웹 브라우저에 DOM을 업데이트 하는 절차
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.

Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아니다.

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

적절한 곳에 사용해야 리액트가 지닌 진가를 비로소 발휘할 수 있다.

리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 업데이트 처리 간결성이다.
UI를 업데이트하는 과정에서 생기는 복잡함을 해소하고 더욱 쉽게 업데이트에 접근할 수 있다.

---

2. 기타 특징

리액트는 프레임워크가 아니라 라이브러리이다.
다른 웹프레임워크가 Ajax, 데이터 모델링, 라우팅 등의 기능을 내장하고 있는 반면, 리액트는 뷰만 신경쓰는 라이브러리라서 기타 기능은 직접 구현해야한다.

하지만 다른 개발자들이 만든 라이브러리를 사용하여 빈 자리를 채우면 된다.
라우팅에는 리액트 라우터, Ajax 처리에는 axios나 fetch, 상태 관리에는 redux나 MobX 등

또 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수 있다.