DOM, Virtual DOM이란?

1. 기본 개념

• 웹 브라우저: HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여줌
• 렌더링: 해석한 HTML 코드를 화면을 통해 보여주는 과정
• API(Application Programming Interface): 응용 프로그램에서 사용할 수 있도록, 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스

 

 

2. DOM과 HTML의 차이점

• HTML(HyperText Markup Language): 화면에 출력하고자 하는 모양과 구조를 단순 텍스트로 구성하여 문서로 작성한 것
• DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있음

 

 

3. DOM(Document Object Model) 이란?

• 브라우저는 HTML 코드를 해석하여 요소들을 트리 형태로 구조화해 표현하는 문서(데이터)를 생성함. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링함.

Why Tree? HTML 코드는 요소가 다른 요소 안에 포함되는 형태를 갖고 있어, 트리 형태의 계층구조를 형성

즉, HTML -> 'DOM' -> 해석 결과 화면(사용자가 보는 화면)

 

• DOM은 자바 스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제 그리고 이벤트 처리할 수 있도록 하는 프로그래밍 인터페이스 -> 자바 스크립트가 웹 문서의 대한 어떤 동작을 구현하고 나면 DOM에 결과가 반영되어 렌더링됨
• HTML 코드는 정적인 코드이므로 사용자와 동적인 상호작용을 하기 위해서는 DOM의 역할이 필요

 

 

4. React의 Virtual DOM 사용

• 데이터의 동적인 변화를 직접적으로 DOM을 조작하는 것이 아니라 DOM의 사본이라고 할 수 있는 새로운 Virtual DOM을 생성
• 생성된 Virtual DOM과 이전에 저장된 Virtual DOM을 비교해 변경된 부분의 DOM만을 변경 -> 조화 과정(reconciliation)

Virtual DOM 업데이트 과정

• 위 과정을 ReactDOM.render() 함수가 처리하고 있음 -> 참고 링크

재조정 (Reconciliation) – React

 

 

 

결과적으로 React는 효율적으로 DOM을 조작시키기 위해 내부적으로 Virtual DOM을 활용, 동적인 웹 서비스를 제공하려면 React를 활용하여 효율적으로 서비스를 제공할 수 있음