2. 리액트(React) 특징

2.1 Virtual DOM

2.1.1 DOM(Document Object Model)

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

- DOM은 트리 형태라서 특정 node를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

 

2.1.2 Virtual DOM

- 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

 

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 아래와 같이 세가지 절차

 

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교

3. 바뀐 부분만 실제 DOM에 적용

 

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

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