Virtual DOM이란? 그리고 사용 시 장점은?

👩🏻‍💻 Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?

 

💁🏻‍♀️ 요약하자면 ,

React의 가상 DOM은 실제 DOM과 유사한 내용을 담고 있는 복사본이며, 이를 활용하면 렌더링을 최적화할 수 있습니다.

 

가상 DOM을 먼저 설명하자면,

React는 변경 이전과 변경 이후의 두 개의 가상 DOM을 유지합니다. 첫 번째 가상 DOM은 변경 이전의 내용을, 두 번째 가상 DOM은 변경 이후에 보여질 내용을 담고 있습니다. 변경된 내용이 화면에 새롭게 그려지기 전, 즉 실제 DOM이 변경되기 이전에 React는 두 개의 가상 DOM을 비교하여 어떤 부분이 변경되었는지 효율적으로 찾아내는 작업(또는 Diffing)을 수행합니다.

 

이때,

React는 부모 요소의 타입이 변경되면 모든 자식 요소나 컴포넌트를 삭제하고 다시 추가합니다. 따라서 자식 요소가 많은 부모 요소의 타입을 변경하면 화면이 잠깐 끊긴 것처럼 보일 수 있습니다. 또한 React는 중간에 요소를 추가하면 그 뒤에 있는 요소가 변경되지 않았다는 사실을 알 수 없기 때문에 변경 여부를 알기 위해 모든 값을 비교해야 합니다. 이는 연산량이 증가할 수 있습니다. 이런 경우 가상 DOM을 사용하면 React가 렌더링을 효율적으로 수행할 수 있습니다.

따라서, 가상 DOM은 React의 성능 향상을 위한 핵심 요소 중 하나입니다.

 

 

📎 내용 참조

-  Youtube: 별코딩의 React의 가상돔 (Virtual DOM)이 뭔가요?

- 책 <실전 리액트 프로그래밍> 이재승 지음