가상 DOM(Virtual DOM)

• 리액트의 핵심 개념 중 하나로 가상 DOM은 실제 DOM의 가벼운 복사본이며 React 자바스크립트 라이브러리에서 실행됨
• 가상 DOM을 사용하여 이전 DOM과 비교하여 변경된 부분을 찾아내어 실제 DOM에 적용함으로써 불필요한 DOM 조작을 최소화하여 성능을 향상 시킴

업데이트 순서

1. 상태(state)나 속성(props)이 변경되면 새로운 Virtual DOM 생성
2. 이전 Virtual DOM과 현재 Virtual DOM을 비교하여 변경된 부분 식별
3. 변경된 부분을 실제 DOM에 적용

* DOM이란 DOM(Document Object Model) 문서 객체 모델로 웹페이지의 구조화된 표현으로 트리 구조로 저장됨 Javascript와 같은 스크립팅 언어를 사용해 DOM에 접근하고 조작할 수 있음 DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하될 수 있음

* 배치 처리(batching)
업데이트 시 상태나 속성 변경 등의 작업을 모아서 일괄절으로 처리하는 형식의 배치 처리 방식이 사용됨

1. 이벤트 핸들러 호출: 여러 이벤트 핸들러가 동시에 호출될 때, 해당 이벤트에 대한 변경사항들을 모아서 한 번에 처리(한 번의 클릭으로 여러 상태가 변경될 때)
2. 상태(State) 및 속성(Props) 변경: 여러 상태나 속성이 동시에 변경될 때, 이에 대한 업데이트를 한 번에 처리
3. 비동기 작업 완료: 비동기 작업이 완료되었을 때 발생하는 상태 변경 사항들을 한 번에 처리
4. 다음 렌더링 프레임 요청 전: 다음 렌더링 프레임이 요청되기 전에 발생한 변경사항들을 모아서 처리. 브라우저가 렌더링을 시작하기 전에 변경사항들을 적용함으로써 성능을 향상시킴