리액트 가상돔 Virtual DOM 정리

리액트는 가상 돔을 사용하여 실제 돔에 업데이트 시킨다.

여기서 나오는 가상돔이 무엇인지 정리를 해보려고 한다.

리액트 Virtual DOM에 관련해서는 면접 질문에서도 자주 나오게 된다.

 

Virtual DOM에서 DOM이 무엇인지 알아보자.

---

DOM

- DOM은 Document Object Model의 약어로 웹 페이지를 프로그래밍 언어가 이해할 수 있는 구조로 표현한 것이다.

DOM은 문서의 구조를 트리 형태로 나타내는데. 이트리의 각 노드는 객체를 나타낸다.

HTMl 문서가 웹 브라우저에 로드되면 브라우저는 HTML 태그들을 파싱하고 DOM 요소를 생성한다.

이렇게 생성된 DOM은 자바스크립트를 통해 조작이 가능하다.

DOM API

- 자바스크립트는 DOM API를 사용하여 웹페이지 내의 요소들을 선택, 수정, 추가, 삭제 등 여러작업을 할 수 있다. 그 외에도 웹페이지의 동적인 기능들을 조작이 가능한데 이것도 자바스크립트가 DOM 요소인 버튼에 이벤트리스너를 추가하면서 가능해진다.

 

* 실제 DOM은 DOM API를 가지고 있지만 가상돔은 API를 가지고 있지 않다.

 

---

Virtual DOM

- 실제 DOM의 가벼운 버전으로 실제 DOM 노드 트리를 복제한 자바스크립트 객체이다.

class, style등의 속성들은 가지고 있지만 실제 DOM이 가지고 있는 querySelector, getElementById, addEventListener ... 등 API는 가지고 있지 않다. 

 

Virtual DOM의 동작 과정

1. 초기 렌더링

- React 컴포넌트가 생성될 때, 해당 컴포넌트의 가상 DOM트리가 생성된다.

- 가상 DOM 트리는 실제 DOM트리와는 유사하지만, 메모리에 존재하며 실제 DOM과 동기화되어있지 않다.

- 이러한 과정에서 만약 실제 DOM Node에 변화가 생기면 새로운 DOM트리를 만든다.

      * 이 과정이 비효율적이라고 생각할 수 있지만 DOM Node를 조작하는것에 있어서 비효율성은 DOM트리를 업데이트하는 과정에서 발생하는것이 아닌 렌더링하는 과정에서 비용이 든다. 가상 DOM은 메모리상에서 동작하기 때문에 빠르게 동작된다!

 

2. UI 업데이트 감지

- 컴포넌트의 상태나 속성이 변경되면, React는 이를 감지하며 업데이트가 필요한 부분을 결정하게 된다.

 

3. 가상 DOM 비교

- 변경된 부분을 찾기 위해서 이전 가상 DOM 트리와 현재 가상 DOM트리를 비교한다.

     * 이 과정을 Diffing이라 한다.

- 이 과정에서 변경된 요소나 속성 등을 찾아내고, 실제로 업데이트해야 할 대상을 판단한다.

 

4. 실제 DOM 업데이트

- 변경된 부분만 선택적으로 실제 DOM에 반영한다.

- React는 최소한의 작업으로 필요한 부분만 직접 수정하고 성능을 최적화한다.

 

5. 재조정

- 가상 DOM 비교 및 업데이트 과정에서 모든 자식 컴포넌트도 재귀적으로 처리 된다.

- 이러한 재귀 과정을 통해서 전체 컴포넌트 계층 구조가 조정되고, 최정적인 UI가 확립된다.
* Virtual DOM과 실제 DOM을 비교하고 일치시키는 과정

 

이러한 과정을들 통해서 가상 DOM을 비교 후 최소한의 작업만 수행하며 성능 개선과 일관된 UI업데이트를 제공한다.

 

---

Diffing

- React에서 이전 가상 트리와 새로운 Virtual DOM 트리를 비교하는 과정을 의미 한다.

- 두 트리를 비교하며 O(n)의 복잡도로 작동하는 알고리즘

- 이과정을 통해서 UI의 어떤 부분이 변경되었는지 판단하고, 실제 DOM에 필요한 최소한의 변경만 반영

 

 

Mapping

- 컴포넌트 배열을 생성할때 사용하는 기법

- React에서 배열은 key props를 가져야한다.

- 배열에서 어떤 항복을 변경하고 추가, 삭제 등 식별을 할 수 있다.