FE/React

HTML의 DOM과 JavaScript의 관계 & React의 탄생

시녜's 2023. 3. 5. 02:40

  1. DOM(document object model) 문서객체모델

- 웹페이지(HTML, XML)의 콘텐츠 및 구조, 스타일 요소를 구조화시켜 프로그래밍 언어가 해당 문서에 접근하고 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스(의사소통 매개체)이다.

- 웹페이지(HTML문서)를 계층적 구조와 정보로 표현하며 이를 제어할 수 있는 property와 method를 제공하는 트리 자료구조

-> 최상위 노드(root)에서 시작해 자식 노드를 가진다

 

출처-위키백과

▶ Document node(root)
-  최상위 루트노드로 window객체의 document 프로퍼티로 바인딩되어있다. 문서에 하나만 존재한다.
▶ Element node
- html, head, body, meta, title, div, h2 ...
- 속성을 가질 수 있는 노드로 부모-자식 관계를 가지는 계층구조를 이룬다.
▶ Attribute node
- 노드에 대한 요소 정보를 가지는 노드이다. 부모-자식 관계가 아닌 해당 노드와 바인딩되어 있는 구조이다.
▶ text node
- 노드의 정보를 표현하는 가장 마지막에 위치하는 자식 노드 (리프노드)
- <h1> 태그 안에 들어가는 텍스트가 text node </h1>

DOM - JavaScript

📌 웹 브라우저에 기본적으로 내장되어 있는 자바스크립트로 (selector API 사용) DOM의 노드를 제어해 동적인 기능을 줄 수 있다.

※ DOM은 js만으로 구현되는 것이 아니지만 js의 아성을 이길 수 있는 언어가 없다. 

📌 HTML문서에 없는 노드를 만들고 이어 붙여 웹 페이지에 렌더링 하는 과정이 동적으로 구현되는 것이다.

 

DOM 객체 구성요소

  • 프로퍼티(property) : DOM 객체의 멤버 변수로  HTML 태그의 속성을 반영한다.
  • 메서드(method) : DOM 객체의 멤버 함수로  HTML 태그를 제어한다.
  • 컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열이다. 예) children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가진다.
  • 이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가진다.
  • 스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근이 가능하다.

 

  2. 리액트의 탄생

📌 배경 

  • dom을 직접 건드리는 작업은 번거롭다.
  • 사용자와 인터렉션이 많아질수록 동적인 UI를 표현하려면 코드가 복잡해지며 관리하기 어려움

📌 react 발상

  • 어떠한 상태가 바뀌었을 때, 처음부터 DOM을 초기화하고 새로 만들어서 보여주자는 아이디어에서 시작

📌 문제점

  • 매번 이렇게 하게 되면 다양한 문제가 발생

📌 해결

  • 메모리에 가상 DOM을 만든다.(속도와 성능 문제 해결)
  • 업데이트가 필요한 부분만 가상 DOM으로 수정한다.
  • 그 이후 REACT의 알고리즘을 통해 다른 부분을 감지하여 실제 브라우저의 DOM에 패치시켜준다.