React DOM이란? 가상돔이 나오게된 이유! 서버리스

돔(DOM)이란?

DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

 

DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.

문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.

  보통 돔트리형태를 지니고있어 돔트리라고이야기하기도 한다.

DOM은 HTML과 자바스크립트를 서로 이어주는 역할을 한다.

 

 

가상 돔 (Virtual DOM )이 나오게 된 이유 ?

기존 렌더링 방식은

1. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를 만든다. 

2. 브라우저는 서버가 보내준 CSS 파일 을 해석(Parsing)하여 CSSOM 트리 도 만든다.

3. DOM 트리 + CSSOM 트리 를 결합해 렌더트리 를 만든다. 

4. 렌더트리로 각 노드의 위치와 크기를 계산한 레이아웃 을 만든다. 뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를 계산한다

5. Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리는 페인트(Paint) 를 한다.

 

이로인해 문제점이 발생한다. DOM은 새로운 요청이나 변경사항이 있을때마다 매번 리렌더링을 한다. 이과정에서 요청 변경사항이 많다면

그때마다 리렌더링이 일어나기때문에 렌더할 양이 많으면 느려지게 된다. 

그래서 '가상돔'이 나오게 되었다. 

 

리액트의 가상돔은 실제DOM과 같은 내용을 담은 복사본이다. 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.

그리고 리액트는 항상 두개의 가상돔을 가지고있다. 첫번째 가상돔은 변경이전의 내용을 담고있고 두번째 가상돔은 변경 이후에 보여질

내용을 담고있다.

 

이렇게 두개의 가상돔을 가지고있는 이유는 변경된 내용이 화면에 새롭게 그려지기 전, 곧 실제DOM이 변경되기 이전에 리액트는 

두개의 가상돔을 비교해 정확히 어느부분이 바뀌었는지를 엘리먼트들을  비교하여 파악합니다. 이 과정을 디핑이라하는데 

디핑을 통해 변경된 부분을 파악해 리액트는 batch update를 수행하여 실제 DOM에 적응시킨다.

 

이렇게 재조정하면 바뀐부분만 리렌더링이 일어나기때문에 속도가 DOM보다 빠르게느껴진다.

 

 

 

서버리스(Serverless)란?

서버리스(Serverless)는 직역하면 "서버가 없다"라는 뜻이다.

하지만, 서버가 없는 것은 아니고, 서버를 직접 사고 관리할 필요가 없다라는 의미이다. 

 

즉 개발자가 직접 서버를 사서 관리할 필요없이  클라이드 에서 제공하는 서버를 이용하면 되는것이다.

이제 AWS나 오라클 등 다양한 클라우드 서버 서비스들을  돈을 지불하고 그 서비스를 이용하면 되는 것이다.