Page 23 -

하지만 요즘 큰 규모의 웹 애플리케이션, 예를 들어 트위터나 페이스북을 생각해 보세요. 스크롤

바를 내릴수록 수많은 데이터가 로딩됩니다. 그리고 각 데이터를 표현하는 요소(element)들이 있겠
죠. 요소 개수가 몇 백 개, 몇 천 개 단위로 많다면(예: 페이스북에서 포스트 한 개를 표현할 때 사
용하는 <div> 요소 개수는 약 100개입니다) 이야기는 좀 달라집니다. 이렇게 규모가 큰 웹 애플
리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생하기 시작합니

다. 느려진다는 말인데요. 일부 문서에서는 이를 두고 “요즘 자바스크립트 엔진은 매우 빠른 반면,
DOM은 느리다.”라고 하는데, 정확한 말은 아닙니다.

DOM 자체는 빠릅니다. DOM 자체를 읽고 쓸 때 성능은 자바스크립트 객체를 처리할 때 성능과
비교하여 다르지 않습니다. 단 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS
를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트합니다. 이 과정에서 시간이 허비되는
것입니다.

해결법
HTML 마크업을 시각적인 형태로 변환하는 것은 웹 브라우저가 하는 주 역할이기 때문에, 이를

처리할 때 컴퓨터 자원을 사용하는 것은 어쩔 수 없습니다. DOM을 조작할 때마다 엔진이 웹 페
이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 느려질 수 있습니다. 이런 문제를 해
결하려면 DOM을 아예 조작하지 않을 수 없겠지요? 그 대신 DOM을 최소한으로 조작하여 작업
을 처리하는 방식으로 개선할 수 있습니다.

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를
최소화하고 효율적으로 진행합니다.

1.2.1.2 Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트
객체를 구성하여 사용합니다. 마치 실제 DOM의 가벼운 사본과 비슷하죠.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를
밟습니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

3. 바뀐 부분만 실제 DOM에 적용합니다.

032

리액트를 다루는 기술(본문출력용)0720.indb 32 2018-07-20 오전 11:25:19