// jQuery
$('#content').html('whatever');
// Vanila JavaScript
document.getElementById('content').innerHTML = 'whatever';실제 DOM을 직접 처리하는 것은 성능도 느리고, 비효율적이고, 관리하기 어렵다는 단점이 존재한다.
반면, Virtual DOM은 DOM을 추상화한 자바스크립트 객체를 구성하여 사용한다. 이를 통해 업데이트 처리를 간결하게 할 수 있어 업데이트 과정에서의 복잡함을 해소하고, 쉽게 업데이트에 접근할 수 있다는 장점을 갖는다.
DOM? Virtual DOM?
DOM은 Document Object Model의 약자로, 객체로 문서구조를 표현하는 방법을 말한다. XML이나 HTML로 작성한다.
웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태이기 때문에 특정 노드를 탐색, 수정, 제거하거나 원하는 곳에 삽입할 수 있다.
DOM은 동적 UI에 최적화되어 있지 않다는 단점이 존재한다. HTML은 그 자체로 정적인 자원이기 때문이다. 그러나 자바스크립트를 이용하여 이를 동적으로 만들 수 있다. 또한 웹 브라우저 상에서 DOM에 변화가 일어나면, 웹 브라우저는 페이지를 새로 그려야 한다. 이때 컴퓨터 자원이 사용되기 때문에 업데이트가 잦으면 성능이 저하될 수밖에 없다.
DOM 처리 횟수를 최소화하고 효율적인 진행을 위해 리액트는 DOM 업데이트를 추상화하는 Virtual DOM 방식을 사용하였다. Virtual DOM은 실제 DOM에 접근하지 않고, 이를 추상화한 자바스크립트 객체를 구성하여 사용하는 것이다. 실제 DOM의 사본이라고 이해하면 쉽다.
리액트에서 실제 DOM을 업데이트할 때는 다음과 같은 절차를 밟는다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
2.2. 리액트의 장단점
장점
-
비교적 배우기 쉽다.
-
뛰어난 Garbage Collection/메모리 관리/성능
-
서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 지원
-
간편한 UI 수정 및 재사용
-
페이스북이 만들고, 지속적으로 업데이트중
-
다른 프레임워크나 라이브러리와 혼용 가능
단점
- View Only
- IE8 이하는 지원하지 않음
서버 사이드 렌더링? 클라이언트 사이드 렌더링?
클라이언트 사이드 렌더링의 경우, 처음에는 아무 데이터도 보여지지 않고, 요청에 따라 데이터를 받아 화면을 렌더링한다. 즉, 초기 구동 딜레이가 있다는 것이다. 또한 SEO(검색 엔진 최적화)가 불가능하다는 단점이 존재한다.
반면, 서버 사이드 렌더링은 완전히 만들어진 HTML 파일을 받아오고 렌더링을 진행한다. 페이지 이동시 서버에 매번 요청을 하기 때문에 속도가 느리고 서버에 부하도 크다는 단점이 있지만, 초기 로딩 속도가 빨라 사용자가 컨텐츠를 빨리 볼 수 있고, SEO에 친화적이라는 장점이 존재한다.
리액트는 서버 사이드 렌더링(Server Side Rendering, SSR)과 클라이언트 사이드 렌더링(Client Side Rendering, CSR) 둘 다 지원한다.
서버 컴퓨터 성능이 좋지 않고, 방문자가 많다면 SSR은 권장하지 않는다.
 |  |
|---|
렌더링?
렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정을 말한다.
렌더링 과정 정리 :
- HTML을 파싱하여 DOM 트리를 만든다.
- CSS를 파싱하여 CSSOM 트리(CSS 객체 모델)를 만든다.
- DOM과 CSSOM을 결합하여 렌더링 트리를 만든다.
- 렌더링 트리에서 각 노드의 크기와 위치를 계산한다.
- 개별 노드를 화면에 그린다.
