React는 virtual-dom인가?

React에 관련된 설명을 보다보면 종종 React는 virtual-dom이라서 빠르다라는 식의 이야기를 듣고 한다. 이는 반만 맞는 이야기이다.

export function updateWrapper(element: Element, props: Object) {
  const node = ((element: any): TextAreaWithWrapperState);
  const value = getToStringValue(props.value);
  const defaultValue = getToStringValue(props.defaultValue);
  if (value != null) {
    // Cast `value` to a string to ensure the value is set correctly. While
    // browsers typically do this as necessary, jsdom doesn't.
    const newValue = toString(value);
    // To avoid side effects (such as losing text selection), only set value if changed
    if (newValue !== node.value) {
      node.value = newValue;
    }
    if (props.defaultValue == null && node.defaultValue !== newValue) {
      node.defaultValue = newValue;
    }
  }
  if (defaultValue != null) {
    node.defaultValue = toString(defaultValue);
  }
}

https://github.com/facebook/react/blob/9e3b772b8cabbd8cadc7522ebe3dde3279e79d9e/packages/react-dom/src/client/ReactDOMTextarea.js#L128

 

 

const setTextContent = function(node: Element, text: string): void {
  if (text) {
    const firstChild = node.firstChild;

    if (
      firstChild &&
      firstChild === node.lastChild &&
      firstChild.nodeType === TEXT_NODE
    ) {
      firstChild.nodeValue = text;
      return;
    }
  }
  node.textContent = text;
};

export default setTextContent;

https://github.com/facebook/react/blob/v18.2.0/packages/react-dom/src/client/setTextContent.js#L21

 

React도 결국에는 DOM API를 통해서 DOM를 업데이트 하기 때문에 사용자(개발자)가 직접 DOM을 업데이트 하는 것과 다를 것이 없다. 

 

React의 출발과 virtual-dom에는 조금 더 근본적인 이유가 있지 않을까?

 

React의 출발

 

Facebook은 React를 왜 만들었을까? from Kim Hunmin

 

과거에 비해 프론트 어플리케이션이 복잡해지면서 MVC 패턴을 적용했지만 여전히 UI 상태관리와 VIEW와의 동기화는 사용자(개발자)의 몫이었다.

 

이를 해결해주기 위해서 앵귤러,리액트 등이 등장하기 시작했다.

 

"님은 상태 관리만 하셈. 상태변경되서 UI에 동기화해주는 건 내가 해줄게"

이 과정에서 리액트가 변경해줘야 하는 DOM 을 찾기 위해서 만든 개념이 virtual-dom이다. 다시 말하면 리액트 입장에서 사용자가 state를 변경하면 이게 어느 DOM에 적용되어야 하는지를 찾아야 하는데 그때마다 real DOM을 조회하는 비용을 줄이기 위해서 자바스크립트 객체로 DOM 표현해서 메모리상에 가지고 있는 것이 virtual-dom이다. 

 

virtual dom이 빠르다?

virtual-dom이 빠르다는 표현은 앞서 말한것처럼 매번 실제 DOM을 조회하면서 비교하는 것보다 자바스크립트 객체를 비교해서 변경된 node를 찾는것이 빠르기 때문이다. DOM 자체를 조작하는 것에는 차이가 없다.

 

DOM

Node 인스턴스로 생성된 실제 HTML 객체

 

virtual-dom

css 속성, innerText 등의 "value"만을 가지고 있는 자바스크립트 객체

 

 

 

참고 : https://d2.naver.com/helloworld/2690975