<aside> 💡 리액트나 뷰는 사용자가 사이트에 접속했을 때 해당 라이브러리를 로드해서 브라우저에서 가상 DOM을 사용해서 메모리에서 간략한 자바스크립트 객체로 만든다. 변경 후의 객체와 비교하여 차이점만을 실제 DOM에 적용한다.

</aside>

Document Object Model

document는 HTML이다. HTML의 각 요소들은 브라우저로 전달되면서 실제 객체로서 기능하게 된다. 예를 들어 input 태그의 경우 HTML에서는 그냥 꺽쇠 안에 들어가 있는 요소들이지만 이게 DOM을 통해 실제 조작할 수 있는 실체로 만들어낸 게 바로 DOM이다.

자바스크립트로 DOM을 조작할 수 있다. 파이썬도 beautifulSoup로 조작할 수 있다. 언어에 종속되지는 않는다.

DOM 안에는 노드들이 트리 형태로 들어가 있다. DOM 안의 HTML 요소들은 기본적으로 노드이다. appendChild등의 메서드를 사용할 수 있는 이유가 그것이고, 노드는 이벤트를 발생시킬 수 있는 이벤트 타겟으로서의 기능을 하기 때문에 addEventListner 등을 통해 이벤트를 붙일 수 있다.

가상 돔

리액트 등 : HTML 요소들을 선택해서 변경된 부분만 리렌더링 할 수 있다.

DOM의 기능만 비슷한 자바스크립트 객체이다. 실제 DOM은 무겁다. DOM의 HTML 요소들에 조작이 가해지면 전반적인 DOM 전체의 배치에도 영향을 주고 컴퓨터에 부담도 된다.

이것들을 간략한 자바스크립트 객체들로 만든다. DIFFING이라고 하는데, 두 개의 객체를 만들어 하나는 바뀌기 전의 DOM 모습, 하나는 바뀌고 난 뒤의 DOM 모습으로 만든 다음 이 둘을 비교한 다음 차이가 생기는 부분만 실제 DOM에 적용한다.

리액트는 라이브러리이다.

자바스크립트 코드 안에 리액트 라이브러리를 로드하면, 리액트 라이브러리(프레임워크)가 사이트가 실행될 때 코드에 있는 템플릿 및 데이터들을 읽어서 화면에 나타내준다.

이 과정을 브라우저에서 하기 위해 가상 DOM을 쓴다.

사용자가 작성한 리액트 전용 코드를 브라우저가 가상 돔으로 해석해서 메모리에서 먼저 구현한 다음 최종적으로 실제 DOM에 적용한다.

언제?

브라우저가 자바스크립트 파일을 받아서 사이트가 실행되는 런타임 시에.