🎈 Chapter 3: 가상 DOM

가상 DOM 소개

그냥 DOM이라고 하면 브라우저 런타임의 문서 모델을 의미합니다. DOM의 가벼운 복사본이 가상 DOM인데, 실제 DOM은 노드 객체로 구성되고 가상 DOM은 설명 역할을 하는 평범한 JS 객체로 구성된다는 점에서 큰 차이가 있습니다.

리액트는 우리가 setState 또는 다른 메커니즘을 통해 UI를 변경하라고 지시할 때마다 가상 DOM을 먼저 업데이트한 다음, 가상 DOM의 변경 사항에 맞춰 실제 DOM을 업데이트합니다. 이 과정을 가리켜 재조정(reconciliation)이라고 합니다.

가상 DOM을 먼저 업데이트하는 이유는 실제 DOM의 업데이트가 다소 느리고 비용이 많이 들 수 있기 때문입니다. 가상 DOM 업데이트는 실제 페이지 레이아웃을 변경하지 않기 때문에 훨씬 빠르게 동작합니다.

리액트는 가상 DOM이 업데이트되면 비교 알고리즘으로 가상 DOM의 이전 버전과 새 버전의 차이점을 식별합니다. 그 후 실제 DOM 업데이트에 필요한 최소한의 변경 사항을 선정하고, 일괄적이고 최적화된 방식으로 변경 사항을 적용해 성능 영향을 최소화합니다.

실제 DOM

웹 브라우저는 HTML 페이지를 읽어 들이고 나면, 구문을 분석해 노드와 객체의 트리, 다시 말해 DOM이라고 부르는 객체 모달로 변환합니다. DOM은 커다란 자바스크립트 객체일 뿐입니다. 웹 페이지의 현재 상태를 실시간으로 표현한 것으로, 사용자가 페이지와 상호작용하는 대로 계속 업데이트됩니다.

실제 DOM의 문제점

성능, 브라우저 간 호환성, 보안 취약성 등이며, DOM을 직접 조작하면 크로스 사이트 스크립팅(XSS) 취쟉점이 생길 수 있습니다.

성능

실제 DOM에서 가장 문제시되는 사안은 성능입니다. 엘리먼트의 추가나 제거, 엘리먼트의 텍스트나 속성 업데이트 등으로 DOM을 변경할 때마다 브라우저는 레이아웃을 다시 계산하고 페이지의 영향을 받는 부분을 다시 그립니다. 특히 크고 복잡한 웹 페이지라면 이 과정은 속도가 느려지고 리소스를 많이 사용하기도 합니다.

전반적으로 실제 DOM의 성능 문제는 크고 복잡한 웹 페이지를 처리할 때 큰 부담이 됩니다. CSS 선택자 최적화, 이벤트 위임 사용, 읽기/쓰기 DOM 작업 일괄 처리, CSS 애니메이션 사용 등 이러한 문제를 완화하는 기술이 있기는 하지만 복잡하고 구현이 어려울 수 있습니다. 가상 DOM을 사용하면 실제 DOM의 복잡성을 추상화하고 UI를 더 가볍게 표현함으로써 보다 효율적이고 성능이 뛰어난 UI를 제작할 수 있습니다.

브라우저 간 호환성

실제 DOM에서 문제시되는 또 다른 사안은 브라우저 간 호환성입니다. 브라우저마다 문서 모델링 방식이 달라 웹 애플리케이션의 일관성이 보장되지 않고, 이로 인해 버그가 발생할 수 있습니다.

브라우저 간 호환성이 주요 문제 중 하나는 특정 DOM 엘리먼트와 속성을 지원하지 않는 브라우저가 있을 수도 있다는 점입니다. 그 결과 모든 대상 플랫폼에서 애플리케이션이 올바르게 작동하도록 해결 방법을 찾고나 문제를 우회할 방법을 구현하는 데 추가적인 시간과 노력을 들여야 했습니다.

리액트의 합성 이벤트 시스템이 해결하고자 한 문제가 바로 그것입니다. SyntheticEvent는 브라우저의 기본 이벤트를 둘러싼 래퍼(wrapper) 객체로, 여러 브라우저에서 일관성을 보장하기 위해 설계되었습니다. 이 객체는 다음과 같은 매커니즘을 사용해 브라우저 간의 일관성을 보장합니다.

1. 통합 인터페이스

// 리액트를 사용하지 않으면 개발자는 개별 브라우저마다 속성을 확인해야 합니다.
const targetElement = event.target || event.srcElement;

// 리액트에서는 SyntheticEvent 덕분에 일관성이 보장됩니다.
function handleClick(event) {
  const target = event.target;
  // ...나머지 코드
}

2. 이베트 위임

• 리액트는 이벤트 리스너를 엘리먼트에 직접 추가하지 않고 대시 루트에서 이벤트를 받습니다.

3. 다양한 기능 개선

• 기본 자바스크립트에서 onChange 이벤트의 동작은 입력 컴포넌트의 종류에 따라 다릅니다.
• 리액트의 SyntheticEvent 시스템은 이러한 입력 엘리먼트 전체에서 onChange 이벤트의 동작을 정규화합니다.

4. 네이티브 이벤트에 접근

• 웹 브라우저의 네이티브 이벤트가 필요한 경우에는 event.nativeEvent를 통해 접근할 수 있습니다.

문서 조각

문서 조각은 DOM 노드를 저장하는 가벼운 컨테이너입니다. 기본 DOM에 영향을 주지 않고 여러 가지 업데이트를 수행할 수 있는 임시 저장소처럼 동작합니다. 업데이트 작업이 완료되면 문서 조각을 DOM을 추가하는 방식으로 리플로와 리페인팅을 한 번만 발생시킵니다. 업데이트 방식이 리액트의 가상 DOM과 매우 유사합니다.

문서 조각은 일괄 업데이트가 가능한 가벼운 컨테이너이므로 여러 가지 성능 이점이 있습니다.

• 일괄 업데이트
  • 문서 조각 내에서 얼마나 많은 엘리먼트나 업데이트를 수행했든 리플로와 리페인팅은 한 번만 수행됩니다.
• 메모리 효율성
  • 문서 조각에 추가된 노드는 문서의 실제 DOM에서 제거됩니다. 이는 문서에서 큰 영역을 재정렬할 때 메모리 사용량을 최적화하는 데 일조합니다.
• 중복 렌더링 방지
  • 문서 조각은 활성화된 문서 DOM 트리에 속하지 않으므로 문서 조각을 변경해도 실제 문서에는 영향을 주지 않으며, 실제 DOM에 추가될 때까지 스타일과 스크립트가 적용되지 않습니다. 이를 통해 스타일 재계산과 스크립트 실행의 중복 수행을 방지합니다.

목록을 여러 개의 항목을 추가해야 한다고 생각해 봅시다.

const fragment = document.createDocumentFragment();
for(let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `목록 항목 ${i + 1}`;
  fragment.appendChild(li);
}
document.getElementById("myList").appendChild(fragment);

이 예에서는 100개의 목록 항목이 먼저 문서 조각에 추가됩니다. 그 후에 문서 조각을 기본 목록에 추가합니다. 덕분에 문서의 실제 DOM은 각각 100번이 아니라 단 한 번 업데이트됩니다.

이러한 방식으로 문서 조각은 여러 변경 사항을 일괄 처리해 DOM을 효율적으로 조작합니다. 따라서 비용이 많이 드는 리플로와 리페인트 횟수가 줍니다.

리액트의 가상 DOM은 문서 조각 개념을 더 나은 방식으로 구현한 것으로 볼 수 있습니다. 비슷한 점을 간략하게 살펴보겠습니다.

• 일괄 업데이트
  • 문서 조각과 유사하게 리액트읙 가상 DOM은 여러 변경 사항을 한꺼번에 일괄 처리합니다.
• 효율적인 비교 알고리즘
  • 변경 사항이 적용되고 나면 리액트는 현재 가상 DOM과 실재 DOM의 차이점을 확인합니다.
• 단일 렌더링
  • 차이점이 식별되면 리액트는 단 한 번의 일괄 처리를 통해 실제 DOM을 업데이트합니다.

간단히 말해 문서 조각은 문서의 실재 DOM을 업데이트하기 전에 변경 사항을 그룹화하여 최적화하지만, 리액트의 가상 DOM은 한 걸음 더 나아가 애플리케이션 UI 전반에 걸쳐 영리하게 차이점을 파악하고 일괄적으로 업데이트를 처리해 렌더링의 효율성을 극대화합니다.

가상 DOM 작동 방식

리액트 엘리먼트

다음은 리액트 엘리먼트의 예시입니다.

const element = React.createElement(
  "div",
  { className: "my-class" },
  "Hello, world!"
);

다음은 실제로 생성된 엘리먼트입니다.

{
  $$typeof: Symbol(react.element),
  type: "div",
  key: null,
  ref: null,
  props: {
    className: "my-class",
    children: "Hello, world!"
  },
  _owner: null,
  _store: {}
}

$$typeof

객체가 유효한 리액트 엘리먼트인지 확인할 때 사용하는 특수한 심벌입니다. 여기서는 Symbol(react.element)로 설정되었습니다.
일반적으로 $$typeof는 리액트 엘리먼트의 종류를 식별하는 표시자 역할을 합니다.

type

type 속성은 엘리먼트가 나타내는 컴포넌트의 종류를 알려 줍니다. 리액트 엘리먼트의 type 속성은 문자열이거나 함수입니다. 문자열인 경우에는 div, span, button 같은 HTML 태그 이름을 나타냅니다. 합수인 경우 사용자 정의 리액트 컴포넌트, 즉 JSX를 반환하는 자바스크립트 함수가 됩니다.

ref

부모 컴포넌트는 이 속성을 사용해 기본 DOM 노드에 대한 참조를 요청할 수 있습니다. 보통 DOM을 직접 조작해야하는 경우에 사용됩니다. 예시에서 ref는 null로 설정되었습니다.

props

이 속성은 컴포넌트에 전달된 모든 속성과 프롭을 포함하는 객체입니다.

_owner

프로덕션 빌드가 아닐 때만 접근할 수 있는 속성으로, 이 엘리먼트를 생성한 컴포넌트를 추적하기 위해 리액트에서 내부적으로 사용됩니다. 이 정보는 프롭이나 상태가 변경될 때 엘리먼트의 업데이트를 담당할 컴포넌트를 결정하는 데 사용됩니다.

function Parent() {
  return <Child />;
}

function Child() {
  const element = <div>Hello, world!</div>;
  console.log(element._owner); // parent
  return element;
}

_store

리액트 엘리먼트 객체의 _store 속성은 엘리먼트에 대한 추가 데이터를 저장하기 위해 리액트가 내부적으로 사용하는 객체입니다. _store에 저장된 특정 속성 및 값은 공개 API의 일부가 아니므로 직접 접근해서는 안 됩니다.

가상 DOM과 실제 DOM 비교

리액트에서 제공하는 React.createElement는 메모리에 새로운 가상 엘리먼트를 생성하는 함수이고, DOM API에서 제공하는 document.createElement는 document.appendChild 등의 API로 DOM에 추가되기 전, 메모리에 새로운 엘리먼트를 생성하는 메서드입니다.

리액트의 가상 DOM은 트리 같은 엘리먼트를 표현한다는 점에서 실제 DOM과 개념이 유사합니다. 리액트 컴포넌트가 렌터링되면 리액트는 새 가상 DOM 트리를 생성하고 이전 가상 DOM 트리와 비교한 다음, 이전 트리를 새 트리와 일치하도록 업데이트하는 데 필요한 최소 변경 횟수를 계산합니다. 이를 재조정 프로세스라고 합니다. 다음 예시는 리액트 컴포넌트에서 재조정 프로세스가 어떻게 작동하는지 보여 줍니다.

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>카운트: {count}</h1>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

이 컴포넌트를 다음과 깉이 표현할 수도 있습니다.

function App() {
  const [count, setCount] = React.useState(0);

  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "카운트: ", count),
    React.createElement(
      "button",
      { onClick: () => setCount(count + 1) },
      "증가"
    )
  );
}

컴포넌트가 처음 렌더링될 때 리액트는 다음과 같이 가상 DOM 트리를 생성합니다.

div
- h1
  - "카운트: 0"
- button
  - "증가"

버튼을 클릭하면 리액트는 다음과 같이 새로운 가상 DOM 트리를 생성합니다.

div
- h1
  - "카운트: 1"
- button
  - "증가"

그러면 리액트는 h1 엘리먼트의 텍스트 내용만 업데이트하면 된다고 계산하고 실제 DOM의 해당 부분만 업데이트합니다.

효율적인 업데이트

리액트 컴포넌트의 상태나 프롭이 변경되면 리액트는 업데이트된 사용자 인터페이스를 표현하는 새로운 리액트 엘리먼트 트리를 생성합니다. 그런 다음 비교 알고리즘을 사용해 새 트리를 이전 트리와 비교해 실제 DOM의 업데이트에 필요한 최소한의 변경 사항을 결정합니다.

이 알고리즘은 리액트 엘리먼스틔 새 트리를 이전 트리와 비교하고 둘의 차이점을 식별합니다. 이때 비교는 재귀적으로 이루어집니다. 노드가 변경된 경우 리액트는 실제 DOM에서 해당 노드를 업데이트합니다. 노드가 추가되거나 제거된 경우 리액트는 실제 DOM에서 해당 노드를 추가하거나 제거합니다.

이렇게 새 트리와 이전 트리를 노드벼로 비교해 트리의 어느 부분이 변경되었는지 알아내는 작업을 디핑(diffing)이라고 하고, 이때 사용되는 알고리즘을 디핑 알고리즘이라고 합니다.

리액트의 디핑 알고리즘은 고도로 최적화되었으며 실제 DOM에 적용해야 하는 변경 횟수의 최소화를 목표로 합니다. 이 알고리즘은 다음과 같이 작동합니다.

• 두 트리의 루트에 있는 노드가 다른 경우, 리액트는 기존 트리 전체를 새 트리로 대체합니다.
• 루트 노드가 동일하다면 리액트는 노드의 속성이 변경된 경우에만 업데이트합니다.
• 자식 노드가 다른 경우 리액트는 변경된 자식 노드만 업데이트합니다.
• 노드의 자식들이 동일하지만 순서가 변경된 경우, 리액트는 노드를 다시 생성하지 않고 실제 DOM에서 노드의 순서를 다시 설정합니다.
• 트리에서 노드가 제거되면 리액트는 실제 DOM에서 노드를 제거합니다.
• 트리에 새 노드가 추가되면 리액트는 해당 노드를 실제 DOM에 추가합니다.
• 노드이 종류가 변경된 경우, 리액트는 이전 노드를 제거하고 변경된 종류의 새 노드를 생성합니다.
• 노드에 key 프롭이 있다면 리액트는 이를 사용해 노드의 교체가 필요한지 파악합니다. 컴포넌트 상태를 재 설정할 때 유용합니다.

불필요한 리렌더링

리액트의 디핑 알고리즘은 필요한 변경 사항을 최소화해 실제 DOM을 효율적으로 업데이트하는 데 중요한 역할을 합니다. 하지만 불필요한 리렌더링의 문제는 아직 남아 있습니다.

리렌더링은 애초에 리액트가 설계된 대로 작동하는 방식입니다. 리액트는 프롭이 변경되지 않는 컴포넌트도 무시하지 않고 상태나 프롭이 변경된 부모 컴포넌트의 모든 자식 컴포넌트를 호출합니다. 리액트는 컴포넌트가 어느 상태에 종속되는지 알지 못하기 때문에 UI의 일관성을 유지하기 위해 모든 컴포넌트를 리렌더링합니다.

대규모 애플리케이션이라면 많은 컴포넌트가 불필요하게 리렌더링되어 잠재되었던 성능 문제가 불거질 수 있으므로 최적화를 자주 실행해야 합니다.