리액트: 가상 돔

이 문서는 Codecademy의 리액트 강의 중 가상 돔에 대한 설명을 번역한 것입니다.

문제점

돔 조작은 모던 웹에서 핵심이다. 불행하게도 이건 대부분의 자바스크립트 구동보다 아주 느리다.

느린 이유는 대부분 자바스크립트 프레임워크가 돔을 필요한 것 그 이상으로 업데이트 하기 때문이다.

예를 들어, 열 개의 아이템이 있는 하나의 리스트가 있다고 치자. 하나의 아이템에 체크를 했을 때, 대부분의 자바스크림트 프레임워크라면 전체 리스트를 다시 그렸을 것이다. 그건 필요한 것보다 10배 이상의 행위다. 하나의 아이템만 수정했는데, 나머지 아홉 개의 아이템들은 변함이 없음에도 다시 그려져야 한다.

리스트를 하나를 다시 그리는 작업은 웹 브라우저에 큰일은 아니다. 하지만, 모던 웹 사이트에서는 거대한 양의 돔 조작이 필요로 한다. 비효율적인 수정은 심각한 문제를 일으킬 수 있다.

이러한 문제를 다루기 위해 리액트에 있는 가상 돔이라는 개념이 사람들에게 대중화되었다.