24/05/20 React 가상 DOM 에 대해(토막글)

목적

리액트를 접하면서, 자주 나오는 단어인 가상 DOM 이 무엇인지 간단히 정리해보았다.

가상 DOM 이란?

자바스크립트 내에서 웹 문서를 구성하는 HTML 요소들에 접근할 수 있는 API인 DOM을 복사해 메모리에 저장한 형태다.

웹 문서에 직접적인 변화를 주는 것 보다, 메모리에 저장한 객체를 바꾸고 다시 불러오는 작업이 훨씬 효율적이기 때문이다!

가상 DOM 으로 웹을 표현하는 방법

그런데, 실제 DOM 을 변경하지 않고 메모리에 저장한 가상 DOM 을 가지고 어떻게 브라우저에 화면을 표시하는 걸까?

리액트가 가상 DOM을 만들 때, 2가지 형태로 만들어 진다.

1. 화면이 갱신되기 이전의 상태를 담은 가상 DOM
2. 화면이 갱신된 후 상태를 담은 가상 DOM

화면이 갱신되기 전과 후로 나누어 가상 DOM 을 두 개를 갖는다.

화면이 갱신되는 조건은 State의 변경이나 컴포넌트에 props 가 전달이 되었을 때 등의 경우가 있다.(State Change)

1번은 현재 화면을 표시하려면 이미 가지고 있을 것이고, 2번은 화면 갱신되는 조건을 만족할 때 생성이 된다. 1번 가상 DOM 과 2번 가상 DOM 의 비교를 통해 실제 DOM에 반영한다.(Compute Diff and Re-render)

간단히 이해를 해보기 위해서, 여기서 마치도록 하겠다.

더 깊은 내용을 다루게 된다면, 추가 포스팅을 하도록 하자.