[REACT] DOM과 Virtual DOM

DOM

문서 객체 모델. Document Object Model

HTML / XML 문서에 접근하기 위한 인터페이스

 

 

DOM 조작 예시

JavaScript는 브라우저에서 Web API를 이용하고 DOM을 조작하기 위해 만들어진 언어

즉, DOM 조작을 위해서는 JavaScript를 이용한다

<ul id="list">
  <li>a</li>
  <li>b</li>
</ul>
<input id="input"></input>
<button onclick="addItem">+</button>

function addItem () {
  const value = document.getElementById('input').value;
  const list = document.getElemendById('list');
  const newItem = document.createElement('li');
  const text = document.createTextNode(value);
  
  newItem.appendChild(text);
  list.appendChild(newItem);
}

web의 복잡도가 증가함에 따라 DOM 조작이 빈번히 일어나게 됐다.

이때, DOM조작은 브라우저 렌더 과정(렌드 트리 생성, 페인트 등)을 유발하기 때문에 DOM 조작이 많이 발생한다는 것은 그만큼 성능 저하를 일으킨다고 접근할 수 있다

이를 해결하기 위해 등장하게 된 것이 하나의 가상 레이어 역할의 Virtual DOM 이다

 

 

---

 

Virtual DOM

DOM과 달리 가상으로 만들어낸 것

UI의 변경사항을 메모리에 저장해 두었다가 한 번에 진짜 DOM에게 보낸다

즉, DOM 조작이 1회, 브라우저 렌더도 1회만 하는 것.. 굉장히 효율적이다

DOM을 직접 조작하지 않고, 변경사항을 하나의 가상 DOM에 모았다가 실제 DOM(Acutal DOM)으로 한 번에 보내는 기술

 

 

React의 Virtual DOM

데이터가 업데이트되는 경우

• 전부 다 Virtual DOM에 새로 그리고
• 기존과 달리 변경된 부분만 DOM에 한 번에 보낸다

const [value, setValue] = useState('');
const [list, setList] = useState(['a', 'b', 'c']);

const handleChange = (e) => {
  setValue(e.target.value);
}

const handleClick = () => {
  setList([ ...list, value ]);
}

return (
  <>
    <ul>
      {list.map((item, i) => <li key={i}>{item}</li>}
    </ul>
    <input value={value} onChange={handleChange />
    <button onClick={handleClick}>+</button>
  </>
)

 

 

---

참고

DOM 소개 - Web API | MDN

Virtual DOM과 Internals – React

React 가 Virtual DOM 을 사용하는 이유