React 특징

리액트는 특징

리액트는 가상돔 (Virtual DOM)을 사용한다

DOM VS Virtual DOM

DOM이란?
DOM 은 (Document Object Model) 의 약어로, 객체로 문서 구조를 표한하여 xml, html을 작성함.

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

DOM 은 과연 느릴까?

DOM의 역할은 html 을 보여주는 것이며, html은 정적(static)이고 이를 동적으로 만들기 위해서 javascript가 DOM을 접근하여 조작 하고 있다.

DOM 은 느리고, 자바스크립트 엔진은 빠르다고 하는 글들이 많다.
일단 여러 글들을 보면 DOM이 느린건 아니라고 나온다.

• 자체적으로는 빠르지만, 웹 브라우저 에서 DOM 변화가 일어나면 웹브라우저가 css를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인팅 하는 과정에서 느려진다고 한다.

왜 Virtual DOM인가?

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함.

위에서 말했듯이 DOM을 조작할 때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 많은면 성능이 저하되어 느리다고 느껴질수 있기 때문에 DOM 을 최소한으로 조작하여 작업을 처리 하는 방식을 택한 것이다.

Virtual DOM을 사용하여 실제 DOM의 사본을 만들어서 리액트에서 데이터가 변하면 아래 3가지 절차를 진행함

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

기타 특징

일부 웹 프레임 워크가 MVC, MVW 등의 구조를 지향하는 것과 달리 리액트는 오직 뷰(View) 만 담당한다.

• 리액트는 프레임워크가 아니고 라이브러리다

리액트는 정말 뷰(view)만 담당하기 때문에 다른 기능은 직접 구현해야함
마음에 드는 라이브러리를 사용하면 된다는 장점이 있지만. 여러 라이브러리를 접해야 한다는 단점도 있음.