4. React의 기본 개념 - 2

Virtual DOM의 개념과 작동 원리

가장 핵심적인 특징 중 하나로 알려진 Virtual DOM은 React에서 사용되는 핵심 개념입니다. 이번 글에서는 Virtual DOM의 개념과 작동 원리에 대해 알아보겠습니다.

Virtual DOM이란?

Virtual DOM은 실제 DOM(Document Object Model)을 추상화한 가상의 객체입니다. React에서는 UI를 업데이트할 때마다 전체 DOM 트리를 다시 생성하는 대신, 이 Virtual DOM을 사용하여 변경된 부분만을 효율적으로 감지하고 업데이트합니다. 이는 브라우저의 성능을 향상시키고 사용자 경험을 개선하는 데 도움이 됩니다.

Virtual DOM의 작동 원리

1. 초기 렌더링: React 애플리케이션이 실행되면, React는 컴포넌트 트리를 Virtual DOM에 렌더링합니다. 이 때, Virtual DOM은 실제 DOM과 동일한 구조를 가지지만, 실제로는 메모리에 존재하며 브라우저에는 표시되지 않습니다.
2. 상태 변경 감지: 사용자 상호작용이 발생하거나 애플리케이션의 상태가 변경되면, React는 컴포넌트의 상태 변경을 감지하고 Virtual DOM을 다시 렌더링합니다. 이 때, 이전 버전의 Virtual DOM과 현재 버전의 Virtual DOM을 비교하여 변경된 부분을 식별합니다.
3. 가상 DOM 비교: React는 이전 버전의 Virtual DOM과 현재 버전의 Virtual DOM을 비교하여 변경된 부분을 효율적으로 찾습니다. 이를 위해 React는 특정 알고리즘을 사용하여 가상 DOM 트리의 차이를 계산합니다.
4. 실제 DOM 업데이트: 변경된 부분을 찾은 후에는 React는 이를 실제 DOM에 반영하여 화면을 업데이트합니다. 이 때, 변경된 부분만을 업데이트하므로 전체 DOM을 다시 생성하는 것보다 효율적입니다.

예제 코드

// 가상 DOM을 사용한 간단한 React 컴포넌트 예제
import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default Counter;

위의 예제는 가상 DOM을 사용하여 카운터 애플리케이션을 만드는 간단한 React 컴포넌트입니다. 사용자가 버튼을 클릭할 때마다 count 상태가 증가하고, React는 변경된 부분만을 실제 DOM에 업데이트합니다.