[React] Virtual DOM

Virtual DOM이란?

React에서 Virtual DOM은 실제 DOM과 동기화되는 가상의 DOM 표현입니다.

React는 변경된 부분만 실제 DOM에 반영하여 성능을 최적화하는 방식으로 작동합니다.

 

Virtual DOM 작동 원리

1. 컴포넌트의 상태(state)나 속성(props)이 변경되면, React는 Virtual DOM에 해당 컴포넌트의 새로운 가상 표현을 만듭니다.
2. 가상 DOM은 일반 JavaScript 객체로 구성되어 있으며, 컴포넌트의 계층 구조와 속성을 반영합니다.
3. 새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분을 식별합니다. 이 과정은 효율적인 알고리즘을 사용하여 수행됩니다.
4. 변경된 부분을 찾은 후에는 React는 해당 부분만 실제 DOM에 반영합니다. 이를 위해 DOM 조작 메소드를 사용하여 필요한 변경을 적용합니다.
5. 이후에는 변경된 부분만 업데이트되고, 나머지 부분은 유지됩니다. 이를 통해 React는 필요한 최소한의 DOM 조작만 수행하여 성능을 향상시킵니다.

React의 Virtual DOM은 변경된 부분만 처리함으로써 실제 DOM 조작을 최소화하고, 효율적인 화면 업데이트를 가능하게 합니다. 이를 통해 React는 빠른 렌더링과 효율적인 UI 업데이트를 제공할 수 있습니다.

 

 

Virtual DOM 없이도 React를 사용할 수 있을까? 그렇다면 어떤 차이가 있을까?

Virtual DOM은 React의 핵심 기능 중 하나지만, 필수적인 요소는 아닙니다.

Virtual DOM을 사용하지 않는다면 React는 직접적으로 실제 DOM을 조작하여 UI를 업데이트합니다.

 

Virtual DOM 사용안할경우 차이

1. 성능: Virtual DOM은 변경된 부분만을 감지하여 업데이트하므로, 필요한 최소한의 DOM 조작만 수행할 수 있습니다. 이는 전체적인 성능을 향상시키는 장점이 있습니다. 반면에 Virtual DOM을 사용하지 않는 경우에는 변경된 부분을 직접 찾아 업데이트해야 하므로, 성능 저하가 발생할 수 있습니다.
2. 개발 편의성: Virtual DOM을 사용하면 React는 가상의 DOM 표현을 활용하여 컴포넌트의 상태 변경을 추적하고, 업데이트를 처리합니다. 이는 개발자가 직접 DOM 조작에 대한 로직을 작성할 필요가 없어지고, 코드 작성이 간편해집니다. 반면에 Virtual DOM을 사용하지 않는 경우에는 개발자가 직접 DOM 조작에 대한 로직을 작성해야 하므로, 코드의 복잡성이 증가할 수 있습니다.
3. 크로스 플랫폼 호환성: Virtual DOM은 React의 핵심 기능으로, React Native와 같은 다른 플랫폼에서도 동일한 개발 경험을 제공합니다. Virtual DOM을 사용하지 않는 경우에는 특정 플랫폼에 종속된 DOM 조작 로직을 작성해야 하므로, 크로스 플랫폼 호환성이 떨어질 수 있습니다.

Virtual DOM은 React의 주요한 이점 중 하나이지만, 특정한 상황에서는 Virtual DOM을 사용하지 않고도 React를 사용할 수 있습니다. 예를 들어, 단순한 UI나 성능이 크게 중요하지 않은 경우에는 Virtual DOM을 사용하지 않는 방식으로 React를 사용할 수 있습니다.