[리액트] 가상 DOM의 마법

가상 DOM : 
웹어플리케이션 의 성능을 향상시키는 실제 DOM과 동기화되는 복사본으로,
메모리상에 존재하며   JavaScript 경량화 객체 

 

전통적인 이전 DOM의 한계

1. 직접 조작하는 것 → 비용 UP
2. 대규모 작업에서 성능 저하를 일으킴
3. 레이아웃 재계산, 리페인팅 등의 추가적 브라우저 작업 유발

이러한 문제를 해결하기 위해 중간계층 역할을 한다.

가상 DOM’s 작동원리

1. React 컴포넌트 렌더링 될 대 가장 먼저 가상 DOM에 반영 된다
   →  실제 돔은 변경 X
2. 상태를 비교하는 재조정 시간을 거침
   →  비교 알고리즘을 통해 변경이 필요한 부분만 식별한다.
3. 재조정 시간 통해 실제 DOM에 최소한의 변경사항만 적용