React Virtual DOM

React의 최적화 기법 중 하나인 virtual DOM에 대해 알아보겠습니다.

react virtual DOM

혹시 DOM에 대해 아직 정확히 모르시다면 다음 포스팅을 보고 오시면 내용 이해에 도움이 됩니다.

DOM 은 무엇인가?

Virtual DOM이란?

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.
- ko.react.org -

VDOM은 메모리 상에 있는 가상적인 DOM입니다.

ReactDOM과 같은 라이브러리가 실제 DOM을 VDOM과 일치하게 동기화합니다.

이과정을 재조정이라고 합니다.

 

이런 접근방식이 React가 선언적 API 또는 함수형 프로그래밍을 가능하게 합니다.

원하는 DOM 상태를 선언함으로써 React는 실제 DOM을 그에 맞게 재조정합니다.

이러한 접근은 DOM에 대한 여러 접근을 추상화합니다.

 

Virtual DOM이 왜 필요한가요?

VDOM은 React가 최적화하는데 도움을 줍니다.

VDOM은 실제 DOM과 VDOM을 비교하고, 다른 부분만을 부분적으로 update 합니다.

최소한의 DOM update를 통해 더 나은 UX를 제공할 수 있습니다.

 

VDOM - 재조정 결정

그러나 이런 의도가 프로그래머를 괴롭게 하는 경우도 있습니다.

우리는 다음의 포스팅과 같은 일을 자주 겪을 수 있습니다.

리액트 컴포넌트 안 바뀜(react component not change)

컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니다. 같지 않을 경우 React는 DOM을 업데이트합니다.
- ko.react.org -

React는 최소한의 Component만 리 렌더링 하려고 하기 때문에,

위 사례와 같이 Component가 렌더링 되지 않는 경우가 생깁니다.

 

React가 "DOM 업데이트가 필요한지 여부"를 결정하는데 직접 관여할 수 있는 방법이 있습니다.

바로 key입니다.

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
- ko.react.org -

재조정을 강제하고 싶다면 아래와 같이 재조정을 원할 때 key 값을 변경하면 됩니다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

VDOM - 최적화 이슈

VDOM이 위와 같이 VDOM과 실제 DOM을 재조정하는 성능상에 악영향을 줄 수 있습니다.

React는 렌더링 된 UI의 internal representation을 빌드하고 유지 관리합니다. 여기에는 컴포넌트에서 반환되는 React 엘리먼트가 포함됩니다. representation은 React가 JavaScript 객체에서의 작업보다 느릴 수 있기 때문에 필요에 따라 DOM 노드를 만들고 기존 노드에 접근하지 못하도록 합니다.
- ko.react.org -

위에서 말하는 React가 만든 DOM 노드는 VDOM이라고도 불립니다.

 

React가 변경된 DOM 노드만 업데이트하더라도 리 렌더링에는 여전히 다소 시간이 걸립니다. 대부분의 경우 문제가 되지 않지만 속도 저하가 눈에 띄는 경우 다시 렌더링이 시작되기 전에 실행되는 생명주기 함수 shouldComponentUpdate로 이 기능을 무시함으로써 속도를 높일 수 있습니다.
- ko.react.org -

위에서 말하듯이 특정 Component가 update가 필요하지 않음을 알고 있다면 VDOM과 실제 DOM에 대한 비교 및 업데이트를 생략함으로 최적화할 수 있습니다.

shouldComponentUpdate(nextProps, nextState) {
  return false;
}

위와 같이 컴포넌트에서 shouldComponentUpdate를 false를 return 하도록 오버라이드함으로 해당 컴포넌트와 그 자식 컴포넌트의 전체 렌더링 프로세스를 건너뛰게 할 수 있습니다.

 

Shadow DOM?

Virtual DOM과 Shadow DOM에 대해 혼동하는 경우가 있습니다.

Shadaw DOM에 대한 정의는 다음과 같습니다.

웹 컴포넌트의 중요한 측면은 캡슐화입니다. 마크업 구조, 스타일 그리고 동작을 페이지 내의 다른 코드와 분리하고 숨긴 채로 유지하여 서로 충돌하지 않으며, 코드가 좋고 깨끗하게 되도록 하는 중요한 측면입니다. Shadow DOM API는 이러한 캡슐화의 핵심이며, 숨겨지고 분리된 DOM을 엘리먼트에 달 수 있는 방법입니다.
-mozilla-

즉, CSS 조정에 대한 코드를 캡슐화하기 위해 만든 API입니다.

virtual DOM과는 목적이 다릅니다.

 

 

 

참고한 사이트:

Virtual DOM과 Internals – React

리스트와 Key – React

 

Using shadow DOM - 웹 컴포넌트 | MDN