React의 Virtual DOM

19. 리액트에서 사용되는 Virtual DOM 의 동작방식을 설명할 수 있다.
    • 답변)
      • 의도:
        • React의 Virtual DOM 개념 및 동작 방식을 이해 평가.
      • 팁:
        • Virtual DOM의 정의와 필요성 설명.
        • Virtual DOM이 실제 DOM과 어떻게 다른지 설명.
        • Virtual DOM의 업데이트 과정 언급.
      • 모범답안:
        • Virtual DOM은 실제 DOM의 가벼운 복사본으로, React에서 상태 변화에 따른 UI 업데이트를 효율적으로 처리하기 위해 사용된다.
        • Virtual DOM은 메모리에서 작동하며, 변경 사항을 실제 DOM에 반영하기 전에 비교(diffing)하고 최소한의 변경만 실제 DOM에 적용(patching)한다.
        • 이를 통해 성능을 최적화하고 빠른 렌더링을 제공한다.

---

1. 상태 변경 감지
컴포넌트의 state나 props가 변경되면 React는 이를 감지한다.
(구조도 최상단의 보이는 "상태 변경" 단계)

2. Virtual DOM 생성

• 변경된 상태를 기반으로 새로운 Virtual DOM 트리를 생성한다.
• Virtual DOM은 실제 DOM의 경량화된 JavaScript 객체 복사본이다.
• (구조도의 두 번째 단계인 "Virtual DOM 생성")

3. 비교 과정 (Diffing)

• 새로 생성된 Virtual DOM을 이전 Virtual DOM과 비교.
• ("이전 Virtual DOM과 비교" 단계)
• React는 효율적인 비교 알고리즘을 사용해 정확히 어떤 부분이 변경되었는지 파악한다.

❓ 효율적 비교 알고리즘이 뭐지?
😺 TIL - React diffing 알고리즘

4. 변경 사항 확인

• 구조도의 다이아몬드 형태인 "변경사항 있음?"에서 차이점 확인.
• 이 과정에서 두 가지 경로 생성
  • Yes : 변경사항이 발견된 경우
  • No : 변경사항이 없는 경우

5. DOM 업데이트

• 변경사항이 있는 경우 ("Yes" 경로)
  • "변경된 부분만 실제 DOM 업데이트" 단계가 실행된다.
  • 필요한 최소한의 변경사항만 실제 DOM에 적용(patching)된다.
• 변경사항이 없는 경우 ("No" 경로)
  • "업데이트 없음" 상태로 진행.
  • 실제 DOM 조작이 발생하지 않는다.

6. 최종 렌더링

• 마지막 단계인 "렌더링 완료"에서 프로세스가 완료된다.
• 변경사항의 유무와 관계없이 렌더링 사이클이 완료된다.

Virtual Dom 장점

실제 DOM 조작을 최소화하여 성능 최적화, 불필요한 UI 업데이트 방지,
효율적인 배치 처리로 렌더링 성능을 향상, 크로스 브라우저 호환성 보장.