1. 개요
React의 공식문서에서 React의 특징을 "선언형", "컴포넌트 기반", "한번 배워서 어디서나 사용하기" 3가지를 특징으로 제시하고 있습니다. 이 중 "선언형"이라는 특징에 대해 설명하고 이를 위해 React에서 사용한 Virtual DOM에 대해 설명드리겠습니다.
2. 선언형
1) 정의
명령형 프로그래밍
function double(array) {
const result = [];
for (let i = 0; i < array.length; i++) {
result.push(array[i] * 2);
}
return result;
}선언형 프로그래밍
function double(array) {
return array.map((item) => item * 2);
}선언형을 알기 위해선 선언형과 명령형 프로그래밍의 차이를 알아야 합니다. 명령형은 어떻게(How)를 중요시여겨서 프로그래밍의 제어 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다. 선언형은 무엇(What)을 중요시 여겨서 제어 흐름보다는 원하는 목적을 중요시 여기는 형태입니다.
2) React의 선언형
순수 JavaScript
const root = document.getElementById('root');
const header = document.createElement('hi');
const headerContent = document.createTextNode('Hello World!');
header.appendChild(headerContent);
root.appendChild(header);React
const header = <h1>Hello, World!<h1>;
ReactDOM.render(header, document.getElementById('root'));명령형으로 작성된 코드의 경우 "Hello, World!"를 출력하기 위해 컴퓨터가 수행하는 절차를 일일이 코드로 작성해주어야 합니다. 반면, React코드는 내가 UI를 선언하고 render함수를 호출하면 React가 알아서 절차를 수행해 화면에 출력됩니다.
이 덕분에 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하면 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링할 수 있습니다. 또, 코드를 예측 가능하고 디버깅하기 쉽게 만들어 줍니다.
React가 선언형 프로그래밍이 될 수 있었던 배경은 JSX와 Virtual DOM이 있습니다. JSX에 대한 설명은 이전 게시글에 있습니다.
JSX
JSX는 자바스크립트에 XML을 추가한 확장된 문법이다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들리되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
3. Virtual DOM
정의
Virtual DOM은 DOM을 직접 조작하지 않고 변경사항을 하나의 가상 돔에 모았다가 실제 DOM에 한 번에 보내는 기술입니다.
탄생 배경
Web의 복잡도가 점차 증가하면서 DOM 조작이 점점 빈번하게 일어나게 되었습니다. 브라우저 렌더링 과정에 따라 DOM의 조작은 브라우저 렌더링을 유발합니다. 만약 3000번의 변화가 생기면 렌더링도 3000번 진행하게 됩니다.
DOM 조작이 많이 발생할 경우, 이는 매우 비효율적입니다. Virtual DOM은 이런 상황을 해결하기 위해 탄생했습니다.
Virtual DOM은 하나의 가상 레이어입니다. Virtual DOM에 적용하는 변경사항은 DOM에 바로 반영되지 않습니다. 다만 그 변경사항들을 모아뒀다가, 한번에 DOM에게 보냅니다. 그러면 DOM은 업데이트를 딱 한 번만 하면 되고, 렌더링도 한 번만 하면 됩니다. 따라서 DOM 조작이 아주 빈번할 경우 Virtual DOM은 DOM을 조작하는 것에 비해 효율적으로 동작합니다.
React에서의 Virtual DOM
React의 핵심 아이디어는 DOM에 변경사항을 조작해서 집어넣지 않고 그냥 데이터가 바뀔 때마다 전부 다 다시 그려 버리는 것입니다. 여기에 Virtual DOM을 적용한 아이디어는 다음과 같습니다.
전부 다 Virtual DOM에 새로 그리고, 기존에 비해 변경된 부분만 DOM에 한 번에 보내버리자!
이를 React의 재조정(Recondiliation)이라고 합니다. 재조정 과정은 크게 3단계로 나눌 수 있습니다. (재조정 과정에 대한 상세한 설명은 이 게시글에서 확인해주세요.)
- UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링합니다. (실제 화면 상에 렌더링 되는 것이 아니라 비교를 위한 가상 렌더링입니다.)
- 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산합니다.
- 변경된 부분을 실제 DOM에 반영합니다.
Virtual DOM에 대한 흔한 오해
Virtual DOM을 이용하겠다는 건 데이터를 한 번 조작하고, DOM을 또 한 번 조작하겠다는 이야기입니다. 당연히 DOM을 바로 조작하는 것보다 느립니다.
다만 극소수의 상황에서 DOM 조작이 너무 빈번하게 일어날 경우, Virtual DOM을 이용해서 업데이트를 모아서 한 번에 DOM에게 보내는게 더 효율적이게 됩니다.
