[React] 1) 리액트(React), 가상 돔(Virtual DOM)의 역할.

# React

 

매우 심플하게 정의하면, 페이스북에서 개발한 Javascript View(UI) 라이브러리.

 

https://ko.reactjs.org/

 

 

사실상, 단순한 구조의 웹페이지를 만들 때는 위와 같은 Javascript 라이브러리나, 프레임워크들을 채택해서 사용할 필요는 없다. 

 

하지만 단순 웹페이지를 넘어, 사용자와의 인터랙션(Interaction)이 자주 일어나고 무수한 웹페이지들이 서로 관계를 맺고 있는 웹어플리케이션 같은 경우, React.js  /  Vue.js  / Angular.js 와 같은 도구를 쓴다고 한다. 

  

그리고 현 시점에서 웹개발 - 프론트엔드 쪽에서 가장 Hot 하게 사용되어지고 있는 것이 리액트(React) 라이브러리이다. 실제 어느정도 규모감이 있는 기업의 웹사이트나, 어플리케이션 등을 보면 리액트 라이브러리를 사용하고 있는 것을 확인할 수 있다. (지금 글을 쓰고 있는 Tistory 블로그 또한, React를 사용함. )

 

그래서 이러한 리액트를 왜 써야하는 지, 굳이 안써도 되는 상황인데도 불구하고 '그냥 트렌드니깐' 하면서 쓰는 경우가 있지 않을까에 대해 생각해보았다.

 

 

일단은 리액트의 특징에 대해 설명하기 전에, 실제 웹 어플리케이션이 동작하게 되는 브라우저가 사용자에게 보여지는 UI들을 어떻게 그려내는지, 그 과정을 한번 보자.

 

 

 

 

# 브라우저의 UI 연산 과정

[참고] https://d2.naver.com/helloworld/59361

 

 

브라우저(Chrome, Firefox, Safari, IE 등)에서 사용자 인터페이스 즉, UI를 구성하는데는 위와 같은 과정을 거친다.

 

그리고 저기서 빨간색 박스처리한 [ 렌더링 엔진 ] 의 역할에 대해서 알아봐야한다.

 

실제 우리가 UI 개발을 위해서 HTML, CSS, Javascript 등의 파일들이 필요하다.

그리고 DOM(Document Object Model) 이라는 개념과 렌더링 과정을 통해서 사용자에게 보여질 레이아웃을 형성하게 된다.

DOM, 문서객체모델로써 HTML 파일에서 정의한 각 태그의 관계도(Tree 구조)를 정의해주고, 각 태그에 대한 저장 및 조작접을 제공해준다.

 

 

 

 

그렇다면, 저 렌더링 구간에서는 각 파일들이 어떤 식으로 처리되어지는 지 한번 보자.

 

[참고] https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq

 

1) Parser - 각 파일들을 브라우저가 알아들을 수 있게 변환.

 

2) DOM Tree - 파일의 경우, 각 태그의 관계도 형성을 위해 DOM 트리 생성.

 

3) Attachment - HTML의 각 태그에 맞는 스타일(CSS) 정보를 객체 형태로 다음 단계로 넘겨줌.

 

4) Render Tree - 외부 CSS 파일이 선언되어있다면 이를 필요료 하는 각 HTML 엘리먼트에 결합 후, 이전 Attachment에서 전달받은 스타일 값 들을 계산, 그리고 레이아웃 정보 형성.

 

5) Layout - 렌더 트리 작업이 끝난 레이아웃에 대해서 좌표 부여.

 

6) Painting - 렌더링이 끝난 각 레이아웃들에게 실제 사용자에게 보여질 모양과 색 부여.

 

 

 

이렇게 실제 브라우저가 사용자에게 보여주는 UI들의 처리과정을 확인 할 수 있다.

 

이러한 처리과정은 브라우저에 어떠한 작은 변화가 있을 때마다 위의 작업들을 계속적으로 반복하며 다시 레이아웃을 형성하게 된다. 

 

특히나 요즘 같이 SPA(Single Page Application)가 대세인 웹앱 같은 경우, 단일 페이지에서 사용자와의 인터랙션이 빈번히 일어나게 되고, 사용자 입장에서는 한번의 클릭이지만 실제 그 클릭 이벤트로 일어나게 되는 수많은 레이아웃들의 위치, 모양, 색상, 데이터 호출 등이 일어나기 때문에 기존의 방식대로 개발을 진행하게 되면 브라우저가 연산하게 되는 양은 어마어마하게 늘어날 수 밖에 없다. 그리고 자연스럽게 이는 사용자에게 부적절한 경험을 제공하게 된다.

 

그래서 이번 글의 또다른 주제인 가상 돔(Virtual DOM)의 역할이 중요하게 작용이 된다. 그리고 리액트는 가상 돔을 활용하여 개발을 할 수 있게 도와준다.

 

 

# 가상 돔(Virtual DOM)

 

특정 기술로써 존재한다기 보다는 추상적인 프로그래밍 개념이라고 보면 될 것 같다.

 

리액트 공식홈페이지에서는 가상 돔의 역할을 '재조정' 이라는 단어를 쓰는 데, 이는 변화되는 돔의 요소를  

메모리에 저장 후에 실제 적용시킬 돔과 동기화 하는 작업이라는 뜻으로 쓰는 것 같다. 

 

[참고] https://ko.reactjs.org/docs/faq-internals.html

Virtual DOM과 Internals – React

 

조금 풀어서 설명하자면,

돔에서 일어나게 될 변화를 가상 돔에서 브라우저의 처리과정 중 렌더링 과정까지(Painting, Display 단계는 거치지 않음) 진행하면서 그 기록을 저장해두고, 실제 DOM에게 그 변화의 결과만을 전달해주어, 사용자에게 보여주게 된다.

 

그러면 가상돔 없이 그냥 돔에서 변화를 적용시키는 것과 별다른 차이가 없어보이겠지만,

 

위에서 잠깐 언급했듯이, 규모가 큰, 특히나 SPA 방식의 웹 어플리케이션 같은 경우 사용자 인터랙션으로 일어나게 될 변화의 양은 적게는 수십번, 많게는 수천번까지 된다.

 

그렇게되면 위와 같은 브라우저 처리과정을 수십번에서 수천번까지 실제 돔에서 계속적으로 렌더링과 페인팅, 디스플레이 과정을 거치면서 UI가 형성되어진다.

 

하지만, 가상 돔 같은 경우 이러한 변화의 양을 한번에 묶어서 최종적으로 계산된 레이아웃의 정보만 실제 DOM에게 던져주게 된다. 이렇게 되면 브라우저의 연산 양이 기존보다 적어지게 되므로 자연스럽게 사용자에게 보다 쾌적한 UI 경험을 제공할 수 있게 된다.

 

 

이번 글을 통해서 리액트의 필요성, 그리고 이러한 필요성을 이해하기위해 브라우저의 연산과정과 가상 돔(Virtual DOM)의 역할까지 알아보았다.