가상 돔, Virtual DOM

DOM

HTML, XML등 문서의 프로그래밍 interface입니다.

문서의 구조회 된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조를 동적으로 변경할 수 있도록 돕습니다.

Node와 property, method 등을 가지고 있는 object문서로 표현하며, 이들은 Web page를 script 또는 프로그래밍 언어들에서 사용될 수 있도록 연결시켜주는 역할을 담당합니다.

Virtual DOM

virtual DOM은 UI를 가상으로 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의하여 실제의 DOM과 동기화 하는 프로그래밍 개념입니다.

DOM을 수정하는 일은 비용이 크기 때문에 성능저하를 최소화 하기 위해 DOM을 최소한으로 수정해야 됩니다. 웹 application이 복잡해져 가면서, 수만개 이상의 DOM을 직접 관리하고, 조작한다면 어마어마한 성능상 이슈가 발생하게 될 것입니다. 이에 대하여 virtual DOM이 도입되어 위의 과정을 자동화 및 추상화를 해주어 application의 개발 생산성과 성능 향상을 이룰 수 있습니다.

또한 DOM의 update를 batch로 처리하여 실제 DOM의 rerendering을 최소화 함으로써 성능 향상을 이룰 수 있습니다.

batch : 일괄적으로 모아서 처리, virtual dom에서는 모든 dom에 대한 업데이트를 일괄적으로 처리합니다.

Application 개발자들이 real DOM을 직접적으로 제어하지 않고, real DOM 보다 훨씬 쉬운 구조로 UI를 개발할 수 있도록, react 라이브러리에게 real DOM에 대한 처리를 맡기고 JSX라는 Component 베이스 개발 방식을 만들어 줄 수 있도록 하는 환경을 Virtual DOM이라고 합니다.

Component : 재사용이 가능한 각각의 독립된 모듈, 만들어진 컴포넌트를 조합하여 화면을 구성하게 됩니다.

JSX

javascript의 확장 문법이며, typescript를 작성할 때 tsx파일을 이용합니다.

jsx는 javascript 문법에서 html과 비슷하게 사용할 수 있도록 해줍니다. 예를 들어 아래와 같이 작성할 수 있습니다.

function App() {
  return (
    <div className='node1'>
      <label>label</label>
    </div>
  );
}

이러한 형식으로 작성된 코드는 브라우저에서 실행되기 전에 code bundling 과정에서 babel을 사용하여 일반 js형태의 코드로 변환됩니다.

babel : ECMAScript 2015 이후 버전의 js로 작성한 코드를 이전 버전의 javascript로 변환해줌으로써 모든 브라우저에서 동작하도록 호환성을 지켜주는 transcompiler입니다.

위의 코드는 다음과 같이 변환됩니다.

function App() {
  return (
    React.createElement(
      'div',
      { className: 'node1' },
      React.createElement(
        'label',
        null,
        'label'
       )
    )
  );
}

또한 위의 코드는 아래의 object 형태를 가집니다

{
  type: 'div',
  props: {
    className: 'node1',
    children: {
      type: 'label',
      children: 'label'
    }
  }
}

이러한 객체를 React Element라고 하며, 이것으로 virtual dom을 구성하게 됩니다.

위의 객체를 가지고 real DOM에 표현을 하게 되는데 이 과정을 “재조정” 이라고 합니다.

재조정,Rreconciliation

virtual DOM과 real DOM을 동기화 하는 과정을 재조정 이라고 합니다.

재조정에 사용되는 알고리즘은 Heuristic 알고리즘, fiber 알고리즘(React v16 이후)이 있습니다. 알고리즘에 대한 내용은 아주 간략하게 작성하겠습니다.

Heuristic 알고리즘

모든 컴포넌트 트리를 순회하며 업데이트 하는것은 비용이 너무 크므로, 중요하지 않은 정보들은 고려하지 않도록 하여 순회를 줄여 최선의 값을 찾아내는 방법입니다. React 개발팀은 이러한 알고리즘을 이용하여 Time complexity를 어마어마하게 줄여냈다고 합니다.

react 공식문서의 언급

React Fiber

heuristic 알고리즘은 재귀적으로 동작하므로 도중에 멈출수가 없는데, 만약 알고리즘의 실행작업이 오래 걸린다면 화면이 끊기는 등의 현상이 발생하는데, 이는 웹 application에서 치명적인 단점이 됩니다.

위의 문제점을 해결하기 위해 React팀이 2년이 넘는 연구 끝에 Fiber 알고리즘을 개발했다고 합니다.

Fiber알고리즘은 다음의 기능을 가집니다.

• 작업 별 우선순위 지정
• 작업을 일시 중지하고 나중에 다시 시작
• 더 이상 필요하지 않은 경우 작업 중단
• 이전에 완료된 작업 재사용