React Virtual DOM

Virtual DOM은 상태 객체다.

가상돔은 가상이다.

document 객체가 아니기 때문에 가상이다.

가상돔은 가상이 아니다.

가상돔은 리액트가 상태변화를 감지하기 위해 만든 진짜 객체이다.

DOM 뜻

DOM은 “Document Object Model”이다.

가상 DOM이란?

가상 DOM은 원본 DOM의 가벼운 복제본을 메모리에 유지하고, 변경 사항을 이 복제본에 먼저 적용한 다음, 실제 DOM과 비교하여 필요한 부분만 업데이트하는 방식으로 동작합니다. 이를 통해 불필요한 실제 DOM 조작 작업을 최소화하고 성능을 개선할 수 있습니다.

결국 DOM을 객체화 시킴으로써, 변경감지에 대한 최적화를 시킬수 있고 그로인해 불필요한 리렌더링이 감소해서 성능향상이 발생한다고 볼수있을것 같다. 구조화된 형태 개발을 진행하기 때문에, 유지보수성 또한 증가되고 코드 가독성 최적화 효율이 증가된다.

가상 DOM의 이점

1️⃣ 개발 생산성 향상

1. 추상화

실제 DOM 조작에 비해 추상화된 방식으로 UI를 조작하기 때문에 개발자는 더 집중할 수 있는 영역에 더 많은 시간을 할애할 수 있습니다.

 

리액트에서 말하는 추상화란?

리액트에서 말하는 추상화란 개발자가 직접 "실제 DOM"을 가져와서 조작하는 것이 아닌 상태의 변경을 통해 DOM을 조작하는 방식을 의미.

직접 돔 제어는 어떻게 하는가?

Initial Content
	    function initializeDOMManipulation() {
	        const inputElement = document.getElementById('textInput');
	        inputElement.addEventListener('input', handleInputChange);
	    }
	
	    function handleInputChange(event) {
	        const newValue = event.target.value;
	        const element = document.getElementById('myElement');
	        element.textContent = newValue;
	    }
	    initializeDOMManipulation();
	

document API를 활용해서 노드를 가져오고 이벤트를 직접 등록 하고 관리한다.

리액트로 표현하면?

import {useState} from 'react';

const CustomInput = () => {
    const [인풋값, 인풋값변경] = useState('Initial Content');
    return (
        <div>
            <input type='text' value='{인풋값}' /> 인풋값변경(e.target.value)}/>
            <p data-ke-size='size16'>{인풋값}</p>
        </div>
    );
}

export default CustomInput;

DOM을 제어하는것에서 상태를 제어하는 형태로 변경하여 표현하는것을 알 수 있다.

💡DOM을 가져와서 데이터를 확인하고 직접 맵핑하는 과정이 아닌 개발자는 상태만 관리하면 되는 부분을 추상화된 방식 UI조작 이라고 하는듯하다.

2️⃣ 재사용

• Item 컴포넌트를 계속해서 재사용하므로써, 로직의 파편화와 유지보수성을 높여준다.
• 컴포넌트 기반
• 복잡한 코드

💡 가독성, 재사용성,유지보수성 모두 증가되는 것을 알수있다.

가상 DOM의 작동방식

1. 가상 DOM 트리 생성
   • 원본 DOM 구조의 가벼운 복제본인 가상 DOM 트리를 생성한다. 이 가상 DOM은 메모리에서만 존재하며, 실제 화면에 나타나지는 않는다.
2. 상태변경처리
   • 애플리케이션 상태의 변경이 발생하면, 해당 변경 사항을 가상 DOM에 먼저 적용한다. 이 단계에서는 실제 DOM 조작이 아니기 때문에 성능 저하 없이 작업이 이루어진다.
3. 가상 DOM 업데이트 비교

• 가상 DOM에 변경 사항을 적용한 후, 가상 DOM과 실제 DOM을 비교하여 어떤 부분이 변경되었는지를 찾는다. 이 과정을 "가상 DOM 업데이트 비교"라고 한다.

1. 실제 DOM 업데이트

• 가상 DOM 업데이트 비교를 통해 필요한 변경 사항만을 추출하여 실제 DOM에 반영한다. 이 단계에서 브라우저의 레이아웃과 페인팅이 최소한으로 실행되며, 성능 향상이 이루어진다.

간단하게 표현하면 이러한 과정을 거친다

상태 변경 → 변경감지(Diff) → Re-render → 실제 돔 브라우저 렌더링

왜 Virtual DOM이 빠르다고 하는걸까?

1. 브라우저의 렌더링 과정

Javascript > Style > Layout > Paint > Composite

1. 순수 html, javascript로 구현코드에서 렌더링 이벤트를 관찰해보았다.

입력이벤트가 발생하고 Layout → Paint → Commit 과정을 통해 화면을 재조정하는것을 알 수 있다.

3. 리액트 렌더링이 다를까?

💡리액트도 어차피 Layout → Paint → Commit 과정은 똑같다. 오히려 리액트만의 라이프사이클 때문에 더 많은 메소드가 실행 되고있다. 불필요한 렌더링을 많이 발생하는 패턴으로 개발한다면 더 느릴수 있다.

결론( 상태관리가 중요 )

• 리액트에서의 버츄얼 돔은 DOM을 객체화 시킴으로써, 변경감지에 대한 최적화를 시킬수 있고 그로인해 불필요한 리렌더링이 감소시키기 위함이다.
• 리액트 가상돔 렌더링이 빠르다는것은?
  • 결국 변경된 부분만 감지해서 효율적으로 렌더링 이벤트를 발생시킨다는것 때문이다.
• 무조건 빠를까?
  • 아니다. 어차피 리액트도 브라우저 렌더링을 사용하기 때문이다. 그렇다는건 State관리를 체계적으로 관리해야하고 컴포넌트를 잘 분리시켜서 특정 부분만 잘 렌더링 될 수 있다록 개발해야지 빠르다고 생각한다. 이부분에서 HOOK이 필수요소인것으로 보인다.

참고

• https://github.com/acdlite/react-fiber-architecture
• https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained/
• https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics
• https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
• https://legacy.reactjs.org/docs/faq-internals.html
• https://goidle.github.io/