[React] 가상 DOM 객체

이번 시간에는 React의 가상 DOM 객체, 일명 Virtual DOM에 대해 알아보겠습니다. 가상 DOM을 이해하기 위해선, 기존에는 어떤 문제가 있었는지 아는 것이 도움됩니다. 먼저 어떤 문제가 있었는지 알아봅시다. 기존 문제 DOM 조작은 현대 웹에서 필수적인 요소입니다. 이를 통해서, 다양한 UI 컴포넌트를 조작하며, 다이나믹한 웹 서비스를 구성할 수 있습니다. 하지만 DOM 조작은 느리다는 단점이 있습니다. 문제 예시 왜 DOM 조작이 느리다고 하는 것일까요? 결론부터 이야기한다면, 한 문서의 일부분만 수정하더라도 문서의 모든 부분들을 다시 렌더링하기 때문입니다. 예를 들어보겠습니다. DOM 모델은 위와 같이 트리 구조로 구성됩니다. 만약 사용자가 Remove 버튼을 클릭한다면, 아래와 같이 관련 <li> 태그가 제거된다고 가정해보겠습니다. 사용자가 Ruby 항목을 제거한다면, 아래와 같이 화면이 다시 렌더링됩니다. 이때, 수정되지 않은 <h1> 태그와 나머지 <...

Submit