[React] Virtual DOM 가상돔

가상 DOM은 리액트와 같은 프레임워크에서 UI 업데이트를 효율적으로 관리하기 위해 만들어진 기술임. 

 

가상 DOM의 정의

가상 DOM은 웹 페이지의 실제 DOM 구조를 모방한 가벼운 버전임. 브라우저가 화면에 보이는 내용을 유지하는 데 사용하는 진짜 DOM은 변화할 때마다 업데이트가 복잡하고 시간이 많이 걸림. 이를 해결하기 위해, 가상 DOM은 메모리 안에서만 존재하는 가벼운 객체로, 

실제 DOM과 비슷한 구조를 갖고 있지만 더 빠르게 조작할 수 있음. 

 

가상 DOM의 동작 원리

1. 렌더링 준비: React는 컴포넌트의 상태(state)나 속성(props)이 변경되면 새로운 가상 DOM 트리를 생성함. 

2. 비교 과정: React는 이전 가상 DOM과 새로 생성된 가상 DOM을 비교하여 어떤 부분이 변경되었는지를 확인함. 이 과정을 `diffing`이라고 함. 

3. 업데이트 과정: 변경된 부분만 실제 DOM에 반영하여 최소한의 업데이트만 수행함.

 

 

필요성

실제 DOM을 직접 조작하는 것은 느리고 비효율적이기 때문에, 가상 DOM을 사용하면 브라우저의 재렌더링과 레이아웃 계산을 최소화하여 더 빠른 성능과 효율적인 UI 업데이트를 제공함.