리액트의 Virtual DOM 이란?

 

Virtual Dom?

React 의 장점 중 하나인 Virtual DOM은 JavaScript 라이브러리나 프레임워크에서 사용되는 개념으로, 실제 DOM(Document Object Model)의 가벼운 복사본을 메모리에 유지하는 기술이다. 이를 통해 실제 DOM과의 비교를 최소화하고 효율적으로 UI를 업데이트할 수 있다.

 

DOM 은 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML 로 작성한다.
웹 브라우저는 DOM 을 활용해 객체에 자바스크립트와 CSS 를 적용한다. DOM 은 트리 형태라서 특정 노드를 찾거나, 수정하거나 제거하는 등의 원하는 곳에 삽입할 수 있다. 
 하지만, 동적 UI 에는 최적화되지 않다. 규모가 큰 웹 어플리케이션 (페이스북, 인스타그램 등)에서 DOM 에 직접 접근하여 변화를 주면 Reflow 와 Repaint 등의 성능 이슈가 발생한다 (= 느려짐)

웹 애플리케이션에서 UI 상태가 변경될 때마다 실제 DOM을 직접 조작하는 대신, Virtual DOM은 먼저 메모리 내에서 변경을 수행한다. DOM 은 브라우저의 핵심 요소로서, 직접적인 조작이 발생하면 성능에 부정적인 영향을 줄 수 있기 때문에, 그 후 변경 전후의 Virtual DOM을 비교하여 실제 DOM에 최소한의 필요한 업데이트만 적용한다. 
이 과정을 재조정 또는 reconciliation 이라고 한다.

 

이러한 접근 방식은 DOM 조작으로 인한 Reflow 와 Repaint 를 최소화하여 성능을 향상시킨다. 또한, React와 같은 라이브러리에서 사용되는 선언적 API를 가능하게 하며, 개발자가 복잡한 DOM 조작이나 이벤트 처리를 직접 관리하지 않아도 되도록 추상화한다.

React에서 Virtual DOM은 주로 React elements와 연관되며, 이는 사용자 인터페이스를 나타내는 객체이다. 또한 React는 내부적으로 'fibers'라는 객체를 사용하여 컴포넌트 트리에 대한 추가 정보를 관리한다. 그러나 Virtual DOM은 특정 기술이라기보다는 패턴에 가깝기 때문에, 그 구체적인 의미와 구현은 사용되는 맥락에 따라 다를 수 있다.

 

React Fiber 는 무엇일까?

- React 16 버전부터 등장한 reconciliation 엔진으로, virtual dom 의 Incremental Rendering (증분 렌더링) 을 활성화하는 것이다.

- Fiber 는 React 에서 작업의 단위이며, JavaScript 의 객체이다. (콘솔창에서 확인 가능)

 

특징?

- 항상 무언가와 일대일 관계를 가지며 tag 속성을 통해 알 수 있다. (component, dom 요소 등)

- React element 는 fiber 와 유사하지만 React element 는 매번 다시 생성되지만 React fiber 는 가능한 자주 재사용된다는 차이점이 있다.

- React 는 Fiber 를 처리할 때마다 우선순위에 따라 다음 작업을 처리할 것인지 예약할 것인지 정할 수 있다.

Virtual DOM 의 동작 과정

 

1. UI 업데이트 요청: 상태(state)나 속성(props)이 변경되면, 새로운 Virtual DOM 트리가 생성됩니다.
2. Virtual DOM 비교: 새로운 Virtual DOM 트리와 이전 Virtual DOM 트리를 비교(diffing)하여 변경된 부분을 찾습니다.
3. 패치 생성: 변경된 부분만 실제 DOM에 적용하기 위한 패치(patch) 목록을 생성합니다.
4. 실제 DOM 업데이트: 생성된 패치 목록을 실제 DOM에 적용하여, 최소한의 변경만으로 UI를 업데이트합니다.

 

JSX 문법에서 Virtual DOM 

: 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다

function App(){
	return(
		<h1>hihi</h1>
		<h1>hello</h1>
	)
}

// 위처럼 컴포넌트가 여러 요소라면 아래처럼 부모 요소 하나로 감싸야 한다

function App(){
	return(
		<div>
			<h1>hihi</h1>
			<h1>hello</h1>
		</div>
	)
}

 

왜 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸주어야 하는 걸까? 

 

Virtual DOM에서 컴포넌트 변화를 감지해낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다