[기술면접대비] BOM, DOM, Virtual DOM

BOM (Browser Object Model)

브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다.

이를 통해서 브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다.

 

전역객체로 window 가 있으며 하위 객체들로는 location, navigator, document,  screen, history 가 포함되어 있다.

DOM (The Document Object Model)

• DOM은 HTML같은 문서의 구조와 정보를 나타내는 트리 형태의 자료구조이다.
  • 위에서부터 아래로 순차적으로 탐색
  • 여러 요소를 수정해야 한다면 비효율적이다.
• DOM API를 통해 DOM 구조에 접근해서 조작할 수 있다.
  • DOM API란 DOM을 조작하는 데 사용되는 프로퍼티와 메소드들의 집합
  • 이는 js의 querySelector()나 getElementById()와 같은 역할을 한다.
  • DOM을 조작해서 HTML 요소의 속성이나 스타일, 이벤트 등을 수정할 수 있다.
• DOM 트리 안에 각각의 element가 사용하는 node가 들어있다.

Virtual DOM이란 ?

리액트는 Virtual DOM이라는 개념을 통해 UI를 관리하고, 실제 DOM 과 동기화해서 화면을 변경한다.

Virtual DOM은 실제 DOM과 같은 내용을 담고있는 복사본으로, 실제 브라우저에 직접적으로 접근할 수 없고 수정할 수 없다.

Virtual DOM을 사용하는 이유는?

• DOM을 수정하면 렌더링 과정 중 레이아웃이나 페인트 과정이 다시 발생한다. (= 리플로우, 리페인트 과정 발생)
  • 반응형 웹에서 특히 리플로우와 리페인트가 많이 발생한다.
• 리플로우와 리페인트 과정이 많이 발생하면 브라우저 성능이 떨어진다. (특히 리플로우)
• 따라서 Virtual DOM을 통해 DOM에 일괄적으로 변경 사항을 적용하는 Batch Update를 수행함으로써 성능을 최적화한다.

Virtual DOM 작동 방식

1. 리액트는 항상 두 개의 가상돔을 갖는다.
   • 변경 이전의 내용을 담은 가상돔
   • 변경 이후 보여질 내용을 담은 가상돔
2. 변경된 내용이 화면에 새로 그려지기 전에 (= 실제 DOM이 변경되기 전에) 두 가상돔을 비교해 변경된 부분을 파악한다. ⇒ Diffing
3. Batch Update를 수행함으로써 변경 부분을 실제 DOM에 한 번에 적용시킴. ⇒ Reconsiliation (재조정)

diffing

Virtual DOM은 항상 좋은가?

장점

• 불필요한 렌더링을 최소화해 성능을 향상시킨다.
  • 가상 돔은 변화를 감지하면 재조정 과정을 통해 실제 돔과 동기화한다.
  • 재조정 과정
    • UI가 변경 감지 ⇒ UI를 가상 돔으로 렌더링
    • 현재 가상 돔과 이전 가상 돔을 비교해 차이 계산 (Diffing 알고리즘)
    • 변경 부분을 실제 돔에 반영 (Batch Update 수행)

단점

• 실제 DOM과 동일한 구조를 메모리에 유지해야 하므로 추가적인 메모리를 사용한다.
• 간단한 UI를 개발하는 경우 불필요한 오버헤드일 수 있다.

부분 렌더링

• 부분 렌더링은 가상 DOM 트리의 일부만 업데이트하여 전체 페이지를 다시 렌더링하는 대신 성능을 향상시키는 기술이다.
• 조건부 렌더링을 통해 부분 렌더링을 구현할 수도 있다.
  • if 문, switch 문, && 연산자 등을 사용하여 변경된 부분만 렌더링합니다.

•