React가 무엇이냐! 그리고 Virtual DOM

리액트는 Meta에서 만든 오픈소스 JS 라이브러리이며, 가장 많은 개발자들이 사용하는 프론트엔드 기술이다.

웹 페이지의 UI를 구현하는 JS 라이브러리로 이해하자

 

 

[리액트의 특징 2개]

 

1. 컴포넌트 기반의 UI 표현

 

같은 코드를 여러 페이지에 중복으로 사용한다면, 하나의 파일에 수정사항이 발생했을 때 중복 코드가 존재하는 모든 파일을 수정해야한다. 리액트는 중복될 요소들을 ‘컴포넌트’ 단위로 모듈화 한다.  해당 요소가 필요한 페이지에서는 모듈 시스템을 통해 불러다가 쓴다.

 

즉 수정사항이 발생해도 하나의 ‘컴포넌트’만 수정하면 된다.

 

 

2. 편리한 업데이트

업데이트는 상호작용(인터렉션)을 의미함

업데이트: 사용자의 행동(버튼 클릭, 메세지 입력)에 웹이 실시간으로 반응하는 것

 

 

 

[Virtual DOM]

 

프로그래머가 화면 업데이트들을 구현하면서 성능에 크게 신경 쓰지 않아도,자동으로 대부분의 상황에 빠른 속도로 화면을 업데이트 시킬 수 있도록 개발자들을 도와주는 아주 유용한 도구

 

Virtual DOM 을 이해하기 위해서는 웹 브라우저가 어떻게 동작하는지 먼저 알아야 한다.

 

 

 

 

[브라우저의 렌더링 과정]

 

렌더링 : HTML, CSS 등의 웹 페이지를 실제 우리의 눈에 나타날 수 있도록 화면에 그려내는 작업 

DOM(Document Object Model) : 문서 객체 모델로, 브라우저가 HTML 코드를 자기가 해석하기 편한 방식으로 변환한 것.

 

 

1) 브라우저가 해석하기 편한 방식으로 DOM, CSSOM으로 바꾼다

HTML을 DOM으로 변환, CSS를 CSS Object Model로 변환

 

2) DOM과 CSSOM을 합쳐서 Render Tree 생성 

HTML로 표현한 요소들의 배치, 모양과 CSS로 표현한 요소들의 스타일을 합친 웹페이지의 청사진이다.

 

3) Layout

화면에 나타날 요소들의 위치와 크기를 결정한다.

 

4) Painting 

실제 요소들을 화면에 그려내는 과정

 

 

 

 

[웹 브라우저가 화면을 업데이트하는 과정]

 

화면 업데이트는 JS가 DOM을 수정하면서 나타난다(innerHTML, appendChild 등등)

 

DOM이 변경되면, 브라우저가 감지하여 Render Tree를 다시 만들고, Layout을 다시 잡고 Painting을 다시 한다.

 

즉 렌더링 과정이 다시 진행되는 것이다.

 

 

 

 

렌더링 과정 중 Layout과 Painting은 굉장히 오래 걸리는 작업이다. Layout을 다시 하는 Reflow와 Painting을 다시 하는 Repaint가 자주 발생하는 것은 성능악화의 주범이다. 그래서 여러 수정사항을 최대한 모아서 한 번만 DOM 업데이트를 해야 한다.

 

하지만 서비스 규모가 커질수록 최대한 모아서 한 번만 DOM을 수정하는 것은 점점 어려워진다. 리액트의 Virtual DOM은 앞의 어려운 점을 쉽게 해결해 준다.

 

Virtual DOM : 동시에 발생한 업데이트를 모아서 DOM을 한 번만 수정시킬 수 있도록 도와줌

 

 

 

 

Virtual DOM은 Actual DOM(실제 DOM)의 사본이다. 즉 JS 객체로 이루어진 복제판이다.

 

리액트에서는 업데이트가 발생하면 실제 DOM을 바로 수정하는 것이 아니라 Virtual DOM을 먼저 수정한다. 

 

 

Actual DOM을 업데이트하면 브라우저가 변경을 감지해서 렌더링을 다시 할 텐데, Virtual DOM은 실제 DOM이 아니기에 업데이트되어도 아무 일도 발생하지 않음!

 

동시에 일어난 여러 개의 업데이트를 Virtual DOM에 적용시킨 이후 한 번에 Actual DOM에 적용시킨다.  그렇게 되면 실제 돔에는 여러 개의 업데이트가 적용되었지만. 렌더링은 한 번만 하게 된다

 

 

☆★ 정리) Virtual DOM은 대부분 상황에서 충분히 빠른 업데이트를 구현하도록 도와줌 ★☆