Jun 개발노트

Virtual DOM 장/단점

January 02, 2022

vdom

What is the Virtual DOM?

  1. 프로그래밍 개념 중 하나 (Virtual DOM / Incremental DOM / Svelt DOM ??? … hash?? )
  2. 기존 V-DOM과 업데이트 된(이벤트나 서버의 응답 결과로 인해 만들어진) V-DOM을 비교해서 보여준다.

    • 비교한것을 실제 DOM에 적용하는 것은 Reconciliation 이라고 한다.
  3. 장점

    • 효율적인 비교 알고리즘(Diffing Algorithm)
    • 단순하고 성능 향상에 도움이 된다.

      • (Reflow, Repaint, Composite 같은 변화를 한번에 처리해주기 때문에 렌더링 횟수를 줄여준다.
  4. 단점

    • 비교 알고리즘

      • V-DOM을 두개를 사용해야 하기 때문에, 높은 메모리 사용량
      • Props만 변경하였지만, Div 태그의 속성까지 비교하게 되므로 불필요한 오버헤드가 발생
      function WelcomeMessage(props) {
        return (
          <div className="welcome" >
            Welcome {props.name}
          </div>
      }

바닐라와 리엑트의 비교

  1. 바닐라

    • 어떤 이벤트가 발생하면, 어떻게 접근해서 어떻게 바꾸어줄지도 정해줘야 한다.
    • 직접적으로 DOM 노드에 접근해서 노드를 비교해준다
<button onclick="plus()">+</button>
<button onclick="minus()">-</button>
<h3 id="state">0</h3>
<script>
  let state = 0
  const $number = document.querySelector('#state');
  const plus = () => {
    state += 1;
    $number.innerHTML = state;
  }
  const minus = () => {
    state -= 1;
    $number.innerHTML = state;
  }
</script>
  1. React

    • 어떤 상태를 보여줄것인가?
const Foo = () => {
    const [state, setState] = useState(0)
    const plus = () => {
        setState((prev) => (prev += 1))
    }
    const minus = () => {
        setState((prev) => (prev -= 1))
    }
    return (
        <div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
            <h3>{state}</h3>
        </div>
    )
}

export default Foo

VDOM은 돔을 직접 조작하는 것보다 빠른가?

  1. 누군가 Dan Abramov(redux 만든이)에게 물어봤다.

    Dan Abramov

  2. 답변

    • DOM을 직접 조작하는 것보다는 빠를수는 없다. 하지만 그 이상의 일을 더 할 수 있다.
    • 유지보수에 용이하며, UI를 변경하는데 충분히 빠른 속도를 가지고 있다.
    • 이러한 점때문에 페이스북에서 사용

출처


Written by Junho You 배운것을 기록하자