[5주차] 위클리 페이퍼 - 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

Virtual DOM의 개념

• UI의 가상 표현을 메모리에 저장, 실제 DOM과 동기화하는 개념
• Virtual DOM은 실제 DOM의 가벼운 복사본
• 상태 변화가 발생할 때마다 새로운 Virtual DOM을 생성
• 이전 Virtual DOM과 비교하여 실제 DOM에 반영

Virtual DOM의 작동 원리

1. 초기 렌더링
   • 리액트 컴포넌트가 처음 렌더링될 때, JSX는 Virtual DOM으로 변환됩니다.
   • Virtual DOM 트리는 메모리에 저장됩니다.
2. 상태 변화
   • 컴포넌트의 상태(state)나 속성(props)이 변경되면, 새로운 Virtual DOM 트리가 생성
3. Diffing 알고리즘
   • 새로운 Virtual DOM 트리와 이전 Virtual DOM 트리를 비교
   • 두 트리 간의 차이점을 효율적으로 찾아내기 위해, 해당 알고리즘을 사용
4. 패치 과정
   • 비교 결과를 바탕으로 실제 DOM에 필요한 최소한의 변경만 적용
   • 불필요한 DOM 조작을 줄이고, 성능을 최적화

리액트에서 Virtual DOM을 사용하는 이유

1. 성능 최적화
   • Reflow 및 Repaint 최소화
     • Reflow 및 Repaint는 브라우저의 렌더링 성능에 큰 영향을 미침
     • Virtual DOM을 통해 이러한 연산의 횟수를 최소화할 수 있음
   • 배치 업데이트
     • 여러 번의 DOM 업데이트를 묶어, 한 번의 배치 업데이트로 반영함
     • 브라우저가 DOM을 효율적으로 업데이트 할 수 있도록 도와줌
2. 개발 편의성
   • 선언적 프로그래밍
     • Virtual DOM을 사용하면, 개발자는 UI의 현재 상태를 선언적으로 정의할 수 있음
     • 리액트가 이 선언된 상태를 기반으로 UI를 자동으로 업데이트
   • 코드의 가독성
     • 복잡한 DOM 조작 로직을 작성하지 않아도 됨
     • 코드의 가독성을 높이고, 유지보수를 용이하게 함

예제: Virtual DOM의 작동 원리

• increment 함수가 호출될 때마다 setState가 호출
• 새로운 상태를 반영한 Virtual DOM이 생성
• Virtual DOM과 이전 Virtual DOM을 비교하여 실제 DOM에서 변경이 필요한 부분만 업데이트

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

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

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

ReactDOM.render(<Counter />, document.getElementById('root'));

참고 자료

• Virtual DOM 설명
• Reflow와 Repaint