[React 기초] Virtual DOM

리액트 가상돔(Virtual DOM)이란?

 

리액트는 성능 향상을 위해 가상돔(Virtual DOM)을 사용합니다. 가상돔은 실제 돔(DOM)과 유사한 구조를 가지고 있지만, 메모리 상에 존재하는 가상적인 돔입니다.

 

리액트에서 UI가 변경되면, 실제 돔을 조작하는 대신 가상돔에서 변경 사항을 반영합니다. 그리고 가상돔에서 변경된 내용을 실제 돔과 비교하여 변경된 부분만 업데이트합니다. 이를 통해 불필요한 돔 조작을 최소화하고, 효율적인 렌더링을 가능하게 합니다.

 

가상돔은 리액트의 성능 향상에 큰 역할을 합니다. 빠른 렌더링을 위해, 가상돔은 변경된 부분만 수정하기 때문에, 전체 돔을 다시 그릴 필요가 없습니다.

 

그러므로, 리액트에서는 UI 업데이트를 위해 가상돔을 사용하고, 가상돔을 통해 최소한의 돔 조작으로 빠르고 효율적인 렌더링을 구현합니다.

가상돔(Virtual DOM)은 실제 돔(DOM)과 유사한 구조를 가지고 있지만, 메모리 상에 존재하는 가상적인 돔입니다. 가상돔은 실제 돔과 비교하여 변경된 부분만 업데이트하기 때문에, 불필요한 돔 조작을 최소화하고, 효율적인 렌더링을 가능하게 합니다.

예를 들어, 브라우저 화면에 버튼이 있다고 가정해봅시다. 이 버튼의 색상이 변경되었다면, 일반적인 방법으로는 해당 버튼의 스타일 속성을 변경하고, 변경된 스타일을 실제 돔에 반영해야 합니다. 그러나 리액트에서는 이러한 방식이 아닙니다. 대신, 가상돔에서 해당 버튼의 색상을 변경하고, 변경된 내용을 실제 돔과 비교하여 변경된 부분만 업데이트합니다. 이를 통해, 전체 돔을 다시 그릴 필요 없이 빠르고 효율적인 렌더링을 구현할 수 있습니다.