[TIL] DOM, reflow, React

DOM, reflow, React

1.DOM

DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 인터페이스이다.
DOM은 HTML(HyperText Markup Language)이 아니다.
HTML은 웹 페이지를 구성하는 요소에 대해 정의하는 마크업 언어이다.

웹 페이지는 문서를 읽어들이고 이를 렌더링하는 과정을 갖는다.
DOM은 페이지 내의 대부분의 정보를 가지고 있지만,
브라우저는 display:none과 같이 보이지 않는 요소는 포함하지 않는다.
이는 CSSOM(Cascading Style Sheets Object Model)과 결합된 표시 결과이기 때문이다.

다시 돌아와서, 웹 페이지는 일종의 Document이다. 이 문서는 웹 브라우저를 통해
내용이 해석되어 화면에 나타나거나, HTML 소스 자체로 나타난다.

DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
DOM은 웹 페이지의 객체 지향 표현이며 Javascript 등을 이용해 DOM을 수정할 수 있다.

웹 표준 또한 이러한 맥락에서 작용한다.
각기 다른 DOM이 적용된 다양한 브라우저 환경에서 동작할 수 있는 이유는,
많은 브라우저들이 표준 규약에서 제공하는 기능을 기본적으로 제공하기 때문이다.

DOM 은 nodes와 objects로 문서를 표현한다.
이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

2. DOM의 장단점

DOM은 웹 페이지의 동적 조작이 가능하게 만들어준다.
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는
방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
웹 브라우저만이 아니라 다른 플랫폼에서 사용할 수 있는 것도 장점이다.

DOM은 모든 요소를 트리 구조로 저장하여 큰 문서의 경우 메모리 소모가 심하다.
또한 대량의 데이터를 처리하기에는 다소 느린 속도를 가지고 있고,
브라우저마다 DOM을 구현하는 방식이 달라 호환성을 항상 고려해야한다.
특히 DOM 조작은 XSS(Cross-Site Scripting)같은 보안 이슈를 유발할 수 있으므로
악의적인 사용자가 조작하지 못하도록 보안에 대한 고려가 필요하다.

3. reflow

Web Browser에서 HTML 문서의 각 요소의 크기나 위치 등 스타일이 변경되면
해당 요소의 레이아웃을 다시 계산하여 화면에 표시한다.
reflow는 처리 속도가 느리기 때문에 많은 작업이 발생할 경우 웹 브라우저의 성능이 저하된다.
따라서, 웹 페이지를 개발할 때에는 reflow작업이 최소화될 수 있도록 개발하는 것이 좋다.
특히 성능에 영향을 미치는 CSS 속성의 사용을 최소화하고,
JavaScript 코드에서 요소의 크기와 위치를 변경할 때는 최소한의 reflow만 발생하도록 최적화한다.
또한 큰 이미지나 텍스트 블록 등의 요소는 미리 크기를 지정하여 reflow 작업을 최소화한다.

4. React

React는 Facebook에서 만든 웹 앱 UI를 개발 도구이다.
React는 사용자 인터페이스를 컴포넌트로 나누어 개발하고, 이를 조합하여 완성된 UI를 구성한다.
가장 큰 특징 중 하나는 가상 DOM을 사용하는 것이다.
메모리 상에 존재하는 가상 DOM은 DOM과 유사한 구조를 가지며,
이를 활용해 UI를 렌더링하고, 변경된 부분만 실제 돔에 반영하여 불필요한 리렌더링을 최소화한다.