[React] 가상 돔 (Virtual DOM), 알고 써봅시다!

가상 돔 (Virtual DOM)

리액트가 많은 개발자들 사이에서 엄청난 사랑을 받는 이유 중 한 가지는 바로 빠른 처리 속도 덕분입니다.
리액트는 가상 돔을 사용하기 때문에 보다 효율적으로 페이지를 브라우저에 빠르게 그려줄 수 있습니다.

지금부터 가상 돔이 어떻게 React의 처리 속도를 높일 수 있었는지에 대해 알아보겠습니다.

DOM (Document Object Model)

• DOM이란 HTML element들을 tree 형태로 표현한 것입니다.
• 개발자들은 DOM이 제공하는 API를 통해 DOM 구조에 접근하고 원하는 Element들을 조작할 수 있습니다.

그렇다면 Virtual DOM이라는 것은 무엇일까요?

Virtual DOM

• 실제 DOM과 같은 내용을 담고 있는 복사본입니다. 복사본은 실제 DOM이 아닌 JS 객체형태로 메모리 안에 저장되어 있습니다.
• 실제 DOM과의 차이점은 브라우저에 있는 문서에 직접적으로 접근할 수 없습니다. 따라서, 문서 내용을 직접 수정할 수가 없게 됩니다.

그렇다면 왜 가상 돔을 사용할까요?

가상 돔을 쓰는 이유는 DOM을 조작하는 시간을 획기적으로 줄여주기 때문입니다.

리액트는 항상 두 개의 가상돔 객체를 가지고 있습니다.

렌더링 "이전 화면 구조"를 나타내는 가상돔
렌더링 "이후에 보이게 될 화면 구조"를 나타내는 가상돔

가상 돔의 비교 과정

• 리액트는 State가 변경될 때마다 리렌더링이 발생하는데, 이 시점마다 새로운 내용이 담긴 가상돔을 생성하게 됩니다.
• 렌더링 이전에 두 가상돔을 비교해 정확히 어떤 Element가 변했는지를 비교합니다. 이를 리액트에선 Diffing이라고 표현합니다!
• Diffing은 효율적인 알고리즘을 사용해 진행되기 때문에 어떤 Element에 차이가 있는지를 매우 신속하게 파악할 수 있게 됩니다.

리액트는 이를 통해 차이가 발생한 부분만을 (브라우저상의) 실제 DOM에 적용하게 되는 것이죠.

재조정(Reconciliation)

• 이 과정을 Reconciliation(재조정)이라고 합니다. 이 과정이 매우 효율적인 이유는 Batch Update때문인데, 이것은 변경된 모든 Element들을 집단화시켜 한번에 실제 DOM에 적용하는 방식입니다.
• 예를 들어 리스트안에 10개의 항목이 바뀌었다면 실제 DOM을 10번 반복해 수정하지 않고 한 번에 집단화시켜 적용합니다.
• DOM 조작에 비용이 가장 많이 발생하는 지점은 브라우저에 화면을 그려주는 작업입니다. Batch Update는 변경된 Element를 별개로 그려주는 것이 아니라 변경된 내용을 한 번에 받아와 실제 DOM에 적용하기 때문에 효율적입니다.

글을 마치며

• 가상 돔은 DOM을 조작하는 시간을 줄이기 위해 사용됩니다.
• 리액트에서는 두 개의 가상돔을 비교하는 Diffing 과정을 통해 차이가 발생한 부분만을 실제 DOM에 적용합니다.
• 이 과정을 재조정이라고 하는데, 재조정이 효율적인 이유는 Batch Update 때문입니다. 비용이 많이 발생하는 Reflow 작업을 한 번만 사용하여 비용을 절약할 수 있습니다.