(react) DOM이란?

DOM(Document Object Model)이란?

DOM은 웹 페이지의 문서 구조를 트리 형태의 표현해서 만든 객체 모델을 의미함. HTML 문서를 읽어 들인 브라우저는 이 HTML 문서를 DOM이라는 객체로 표현하여 JavaScript를 통해 이 객체를 조작할 수 있음. DOM은 웹 페이지를 자바스크립트로 조작할 수 있도록 만들어진 인터페이스라고 할 수 있음.

 

 

DOM의 구성

• 노드(Node): DOM의 기본 단위로, HTML 문서의 모든 요소(Element), 텍스트, 주석 등
• 요소(Element): HTML 태그에 해당하는 노드(예: div, p, button 등)
• 속성(Attribute): 요소의 특성을 나타내는 값(id="...", class="..." 등)
• 텍스트 노드: 요소 내의 텍스트를 나타내는 노드

 

DOM 조작

DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작 가능. 아래 예시의 경우 클릭 시 배경을 red로 변경해줌.

// HTML
<button id="myButton">클릭 전</button>

// js
<script>
    // DOM 안에 id가 myButton 이름을 가진 요소 지정
    const _button = document.getElementById( 'myButton' );
    _button.onclick = function(){
        // DOM 안에 있는 요소의 스타일을 직접 변경해줌
        button.textContent = '클릭 후';
        button.style.backgroundColor = 'red';
    }    
</script>

 

 

 

React에서의 가상 돔

브라우저는 웹 페이지를 화면에 표시할 때 " HTML, CSS 파싱 → 렌더 트리 생성 → 레이아웃 → 페인팅"의 과정을 거치게 되는데, 이때 비용이 많이 들게된다. React에서는 가상 DOM을 이용하여 전체 DOM을 변경하는 것이 아닌 변경된 부분만 반영하기 때문에 불필요한 렌더링을 줄여 성능 향상을 시킴.

 

자세한 것은 다음 포스팅에서 다뤄보자~ ㅎㅎ