패스트캠퍼스 '한 번에 끝내는 React의 모든 것' 수강 후 정리.textContent / innerHtml / innerText 차이?
DOM (Document Object Model)
문서 객체 모델.
웹 페이지는 일종의 문서로 이 문서가 브라우저를 통해 해석되어 렌더링되거나 소스 코드 그 자체로 나타나기도 한다. 이처럼 동일한 문서가 여러 형태도 표시될 수 있는데, DOM은 HTML, XML 문서의 인터페이스로 문서의 구조화된 표현(논리 트리)을 통해 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
Element
Element는 특정한 Node의 형태로, HTML 문서에서 tag를 사용하여 작성된 노드를 말한다.
즉, <html>, <head>, <title>과 같은 태그로 작성된 모든 객체는 Element가 된다.
반대로 텍스트 노드 또는 어트리뷰트 노드는 태그로 작성되지 않았으므로 Element가 아니다.
이러한 요소 노드는 서로 간의 중첩을 통해 부자 관계를 가지며 정보를 구조화한다. 즉, 문서의 구조를 표현하고 있으며 어트리뷰트 노드, 텍스트 노드들과 연결되어 HTML 문서의 구조 또는 내용 등을 동적으로 조작하기 위해서는 이 요소 노드에 우선적으로 접근하여야 한다.
Node란?
HTML 문서의 모든 것은 Node이며, 모든 DOM 객체는 Node 객체를 상속한다.
HTML 요소는 브라우저의 렌더링 엔진에 의해 파싱되어 요소 노드 객체로 변환된다. 이 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. 이렇게 변환된 노드 객체들을 HTML 요소 간 중첩 관계를 고려하여 트리 구조로 구성되게 되고 이를
DOM이라고 한다.
Vanilla JS를 통한 Element 생성
<!DOCTYPE html>
<html lang="en">
<head>
<title>Static Template</title>
</head>
<body>
<div id="root"></div>
<script>
// Vanila JS
const $root = document.getElementById("root");
const $h1 = document.createElement("h1");
$h1.textContent = "Hello, World!";
$root.appendChild($h1);
</script>
</body>
</html>root를 id로 가진 div 태그 하위에 "Hello, World!"라는 텍스트 노드를 가진 h1 element가 생성된다.
React를 통한 Element 생성
<!DOCTYPE html>
<html lang="en">
<head>
<title>Static Template</title>
</head>
<body>
<!-- CDN을 통한 React 주입 -->
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<div id="root"></div>
<script>
const $root = document.getElementById("root");
const $h1 = React.createElement("h1", { children: "Hello, World!" });
// const $h1 = React.createElement("h1", null, "Hello, World!");
ReactDOM.render($h1, $root);
</script>
</body>
</html>앞선 Vanilla JS를 사용한 경우와 동일한 결과가 나온다.
React / Vanilla JS 비교
현재 시점에서 자세히 알 순 없지만, document.createElement로 만들어진 노드와 React.createElement의 결과가 서로 다름. 리액트의 경우 어떤 객체가 만들어졌고, 두 번째 인자로 넘겨준 객체 또는 세 번째 인자로 넘겨준 값이 Props에 들어간 것을 볼 수 있다.
