DOM & VDOM

July 1, 2024

React

React DOM

→ React 에서의 DOM (문서 객체 모델)은 React와 실제 DOM 사이의 인터페이스를 제공하는 패키지로, 컴포넌트를 DOM에 렌더링하고 state나 props의 변화에 따라 업데이트 됩니다.

React DOM 작동 순서

  1. React는 컴포넌트와 상태 객체를 확인 후 업데이트가 일어나면 변경 전후의 상태를 확인.
  2. 화면에 표시되어야할 모든 정보를 React-DOM에 전달.
  3. React-DOM이 DOM을 업데이트.

React virtual DOM

→ React에서는 Virtual DOM을 사용하여 DOM 전체를 다시 렌더링하지 않고, 변화가 있는 부분만 브라우저에 알려 DOM을 업데이트한다.