React를 왜 사용하시나요?
프론트엔드 직무로 지원을 하게된 당신은 기술 면접을 보게 되었습니다.
앞에 있는 면접관은 당신한테 질문을 합니다.
“Vanial JS 또는 JQuery 개발자에게 React로 개발하라고 설득해야한다면, 어떤 이유를 들어서 설득시키실건가요?”
질문을 들은 당신의 머리속에는 여러가지 키워드들이 떠오릅니다.
“Virtual DOM ? 점유율 ? 컴포넌트 재사용성 ? 성능 ? 생태계 ?”
하지만 키워드만 떠오를 뿐, 이를 정리해서 말할수가 없습니다.
이에 최대한 위 키워드들을 종합해서 대답을 합니다.
“Virtual DOM을 통해 성능을 최적화 할 수 있고, 컴포넌트 기반의 개발이 가능하기 때문입니다.”
하지만 추상적인 대답을 들은 면접관은 꼬리질문을 하게됩니다.
“그렇다면 DOM에 대해서 설명해주시고, Virtual DOM 으로 성능이 최적화되는 이유는 무엇인가요?”
평소에 깊게 생각하지 않은탓에 대답이 막힌 당신은 아쉬움을 남기며 면접전형에서 탈락하게 됩니다.
위에 상황은 React 개발자로 지원하게 된다면, 일반적으로 일어날 수 있는 상황이다.
이번 포스팅에서는 해당 상황을 적절히 해결하기 위해 웹 브라우저의 렌더링 과정과 Virtual DOM에 대해 알아보자.
브라우저 렌더링 과정
기본적으로 알고있듯이 웹 브라우저는 HTML, CSS, Javascript 3가지가 뭉쳐 구성된다.
이를 다이어그램으로 나타내면 다음과 같다.
1. DOM 트리 생성
HTML parser가 DOM 객체로 이뤄진 DOM 트리 생성
2. CSSOM(CSS Object Model) 트리 생성
CSS parser가 inline style과 CSS 코드를 파싱 하여 CSSOM 트리 생성
3. 렌더 트리 생성
DOM과 CSSOM의 정보를 바탕으로, 실제로 브라우저의 화면에 노출되어야 하는 노드들에 대한 정보인 Render Tree생성
4. Reflow (Layout)
렌더 트리의 각 노드들이 브라우저의 뷰포트(Viewport) 내에서 어느 위치에 어떤 크기로 배치되어야 하는지에 대한 정보를 계산
5. Repaint (Paint)
렌더 트리의 각 노드들을 모니터에 실제 픽셀로 그림
위의 과정에서 알 수 있듯이, DOM을 수정할 때마다 Render Tree의 생성부터 Reflow, Repaint의 과정을 다시 수행해야한다. DOM 자체의 수정은 빠르지만, 브라우저가 수행해야하는 이후의 과정이 느리다.
즉, 성능 저하의 주요 원인은 DOM을 수정할 때 발생하는 Reflow, Repaint 과정에 있다. Reflow가 빈번하게 발생하는 경우 브라우저에서는 성능저하가 발생하며, 웹 페이지의 DOM이 복잡하게 구성되어 있고 CSS가 많이 적용된 사이트일수록 더욱 심해진다.
DOM(Document Object Model)
그럼 위에서 말하는 DOM 이란 무엇일까 ?
Document Object Model의 약자로, HTML요소를 JavaScript Object처럼 조작할 수 있는 Model
위의 사전적 정의를 쉬운 말로 풀어쓴다면, DOM은 웹 브라우저와 Javascript가 HTML을 이해하기 쉽도록 트리 구조로 파싱하여 만든 객체다.
아래의 그림을 보면 조금 더 쉽게 이해할 수 있다.
(index.html)
<!doctype html>
<html lang="ko">
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html><!doctype html>
<html lang="ko">
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html>다음과 같은 html 코드가 있다고 생각해보자다. 우리 눈에는 태그들로 감싸여있고 각각이 무슨뜻인지 알지만, 웹을 그리는 브라우저나 HTML을 동적으로 제어하는 Javascript에게는 그저 텍스트에 불과하다.
저 텍스트인 HTML을 DOM 이라는 트리구조의 객체로 변환시켜서 이를 읽는 브라우저와 Javascript가 이해할 수 있는 구조로 HTML 파서가 DOM으로 바꿔주는 것이다.
=> HTML파일을 DOM 트리 구조로 추상화 한 모습
웹을 동적으로 제어
우리가 웹을 개발할때, 정적인 HTML만을 작성하지 않고, Javascript를 통해 동적으로 동작할 수 있도록 해야한다.
그럼 DOM을 동적으로 제어(조작)해야 하는데, 이를 Javascript가 해 줄수 있도록 DOM API 라는 것이 기본적으로 제공된다.
(Vanila JS 로 ToDoList 를 만들어본적이 있는데, 몇몇 반가운 함수들이 보인다.)
DOM API 를 통해서 DOM을 조작한다는 건, 일반적으로 다음과 같은 동작을 의미한다.
1. DOM에 요소를 추가
2. DOM의 요소를 수정
3. DOM의 요소를 삭제
우리는 DOM을 조작하여 <h1>로 감싸진 컨텐츠의 색깔을 빨간색으로 변경하고자 한다. 이를 위해 다음과 같은 코드를 작성하였다.
const h1 = document.querySelectorAll('h1');
h1.forEach((ele)=>ele.style.color = 'red');querySelectorAll 로 h1 태그를 가진 요소들을 배열로 반환한다. 각각의 요소들을 forEach() 메서드를 통해 하나씩 접근하여 요소의 색깔을 바꾼다.
위 과정을 간소화 시켜주기 위해 jQuery 가 등장하였다.
$('h1').css('color', 'red');$ 를 통해 'h1' 태그를 선택하고, 그 프로퍼티 중 css 에 접근하여 색깔을 바꾼다.
Jquery의 한계
jQuery 를 통해서 DOM 을 제어하는 것이 이전에 비해 상대적으로 간편해졌지만, 시간이 지나면서 jQuery는 조금씩 한계를 맞이하게 된다.
쉽게 개발할 수 있는 것도 중요하지만, 사용자와의 상호작용이 많은 웹 앱 특성상 성능이 가장 중요했다. 다음과 같은 이유들로 jQuery에 대한 회의적인 시선이 나오게 된다.
1. jQuery는 vanila에 비해 로드해와야 할 패키지가 많아 간단한 코드를 작성하더라도 성능적으로 떨어진다.
2. jQuery는 조각칼로 DOM을 깎아서 만드는 것에 비유할 수 있어서 대규모 앱에서 유지보수가 쉽지 않다.
3. 사용자에 의한 동적인 DOM 조작이 잦은 앱에서 jQuery를 이용하면, 배치와 화면표시에 많은 연산을 발생시키기 때문에 브라우저의 성능이 낮아지는 문제가 있다.
Virtual DOM
DOM을 수정하는 일은 수반되는 비용이 크기 때문에, 성능저하를 최소화하기 위해서는 결국 DOM을 최소한으로 수정해야한다. 이러한 문제점을 해결하기 위해 Virtual DOM이 등장하게 되었다.
Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체의 트리다. 개발자는 직접 DOM을 수정하지 않고 Virtual DOM을 제어하면 React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 한다. Virtual DOM 의 장점 중 하나는 직접 DOM을 조작하지 않아도 된다는 점 이다.
React에는 state 와 props 라는 개념이 있다. 화면에서 변하는 값을 의미한다.
React는 상태나 속성 값이 변하게 되면 리렌더링 이라는 과정을 통해서 화면에서의 값을 갱신한다. 말 그대로 렌더링을 다시 한다는 뜻으로, 바뀐 상태나 속성 값으로 화면을 그린다는 뜻 이다.
React는 값이 변할 때 화면의 깜빡임 없이 빠른 속도로 값을 변경 시키는데, 그 이유가 바로 Virtual DOM에 있다.
만약 상태나 속성값이 변경된 경우, 변경된 값으로 React는 가상의 돔을 그리게 됩니다. 그린 Virtual DOM과 Real DOM을 Diffing 알고리즘을 통해 변경된 사항만 반영하여 해당 내용을 실제 돔에서 수정한 이후 새로운 화면을 렌더링 하게 된다.
마치며
이번 포스팅에서는 웹 브라우저의 렌더링 과정부터 Virtual DOM의 동작 방식에 대해 살펴보았다.
내용을 잘 이해했다면, 서론에서 언급한 면접 질문에도 자신 있게 답변할 수 있을 것이라고 생각한다.
Virtual DOM 과 실제 Browser DOM 을 비교하여 렌더링 하는 과정을 쉽게 알려주는 유투브 영상을 첨부하며, 추후 포스팅에서는 React 에서 Diffing 알고리즘으로 재조정 (Reconciliation) 이 어떻게 일어나는지에 대해 다뤄보도록 하겠다.
