[React JS] DOM과 Virtual DOM

 

DOM

= 문서 객체 모델

: 웹 페이지를 이루는 태그들을 JS가 이용할 수 있도록 브라우저가 트리구조로 만든 객체 모델

 

이때 문서 객체란 html, head와 같은 태그들을 js가 이용할 수 있는 객체를 의미

 

: DOM은 HTML과 JS를 서로 이어주는 역할

= JS는 document라는 전역 객체를 통해 HTML에 접근 가능

 

 

Virtual DOM

= 가상 돔

: virtual DOM을 사용해 실제 DOM에 접근하여 조작하는 대신 이를 추상화한 JS 객체를 구성하여 사용

: DOM을 직접 조작하지 않고 변경 사항을 하나의 Virtual DOM에 모았다가 DOM에 한 번에 보내는 기술

 

< Virtual DOM 나온 이유 >

수많은 데이터를 처리하고 큰 규모의 프로젝트를 수행하는 경우가 많아질 것이다.

이때 개발자가 태그의 값을 변경하거나 코드를 업데이트하기 위해 DOM에 접근하는 자바스크립트 메서드를 사용해 변경할 것이다.

 

하지만 document.getElementById 등을 이용해 특정 값을 변경하고자 접근할 때 성능 측면에서 단점이 발생한다.

document를 사용하면 DOM을 탐색하는 과정에서 메모리 누수가 발생하고 값을 변경하거나 업데이트하면 다시 렌더링 되는 과정이 반복된다. 이 렌더링 과정은 상황에 따라 여러 번 반복하여 발생할 수 있고, DOM에 변화가 생겨도 렌더링이 발생할 것이다. 

 

따라서 데이터가 업데이트될 때마다 매번 전체를 렌더링하는 것은 성능적으로 매우 떨어져 최소한의 DOM 조작을 위해 Virtual DOM 개념이 도입되었다.

 

 

 

리액트와 Virtual DOM

MVC 패턴을 사용하고 있던 페이스북은 심각한 버그가 있었고 이를 해결하지 못했다.

이때 페이스북은 데이터 흐름을 파악하고 버그를 체크하던 중 DOM에 변경 사항을 조작해 직접 넣는 방식이 아닌 데이터가 변경될 때마다 전부 다시 그리는 방식을 사용하면 버그가 발생하지 않을까하는 생각을 하게 된다.

 

이때 Virtual DOM 방식의 기술이 있을 때여서 그들은 데이터가 바뀔 때마다 전부 다 Virtual DOM에 새로 그리고, 기존과 변경된 부분만 DOM에 한 번에 보내버리려는 방식을 생각하게 된다.

 

 

리액트에서 Virtual DOM 반영 절차

1. 데이터가 업데이트되면 전체 UI를 Virtual DOM에 리렌더링
2. 변화 전 Virtual DOM과 변화된 Virtual DOM 비교
3. 바뀐 부분만 실제 DOM에 적용

컴포넌트가 업데이트 될 때, 레이아웃 계산이 한 번만 발생하여 성능 상 큰 차이를 가져온다.

 

 

---

리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸줘야 함.

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

 

리액트 v16부터 <div>가 아닌 <Fragment>로 대체 가능. 단, import로 불러와야 됨.