Eojin Han

DOM이란?예시 html to DOM manipulate DOM Document, window 객체 왜 React?Imperative(명령형) - how 에 초점.declarative(선언적) - what 에 초점.React: A Declarative UI Library

MDN Web DocsDOM 소개 - Web API | MDN

DOM 소개 - Web API | MDN

이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다.

DOM이란?

React의 동작을 이해하기 위해서, 먼저 브라우저가 코드를 해석하고 UI를 그리는 과정을 알아야 한다.

유저가 웹 페이지에 방문하면, 서버는 HTML 파일을 브라우저에게 반환한다.

브라우저는 HTML을 읽고 DOM을 구성한다.

Document Object Model

DOM은 HTML elements의 오브젝트로 나타낸 것으로, 부모,자식 관계가 있는 트리 모양으로 구성된다.

코드 → DOM → UI

이제 DOM 메소드와 javascript를 사용하여 유저 이벤트를 듣거나, DOM을 조작(추가,삭제,업데이트 등) 할 수 있다.

예시

html to DOM


<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

브라우저가 HTML을 파싱한 후 다음과 같은 DOM 객체 트리를 만든다.


html
  head
    title
  body
    h1
    p
    script

manipulate DOM


const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);

const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);


html
  head
    title
  body
    p
    script
    p

DOM 조작 이후에는 HTML과 DOM이 달라지게 된다.

HTML은 초기 페이지 콘텐츠를 나타내고, (변하지 않음)

DOM은 현재 페이지 콘텐츠를 나타낸다. (자바스크립트를 통해 바뀐 부분 반영됨)

우리가 화면에 보고 있는 건 HTML to DOM 이후 DOM을 통해 화면을 보고 있는 것이다.

Document, window 객체

DOM 접근 시 가장 자주 사용하는 오브젝트들이고, 아래는 대표적인 목록이다.

window object: 브라우저와 같다고 할 수 있다.

document object: root document 자체라고 할 수 있다.

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
..

그 밖에

parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute
element.getAttribute
element.addEventListener
…

왜 React?

Imperative(명령형) - how 에 초점.

어떻게 동작시킬 것인 지에 초점이 맞춰진 것.

구현 방안에 대한 step-by-step을 다 나열해야 한다.

피자로 치면 피자를 어떻게 만들 것인가에 대한 상세한 내용.


<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // Select the div element with 'app' id
      const app = document.getElementById('app');
 
      // Create a new H1 element
      const header = document.createElement('h1');
 
      // Create a new text node for the H1 element
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
 
      // Append the text to the H1 element
      header.appendChild(headerContent);
 
      // Place the H1 element inside the div
      app.appendChild(header);
    </script>
  </body>
</html>

자바스크립트로 DOM요소를 제어하는 예시다.

고작 h1 태그 하나를 자바스크립트를 이용해 추가하는 건데 굉장히 장황하다.

더 많은 걸 하려고 할 수록 더 비대해지고 알아보기 어렵고 관리하기 어려워진다.

declarative(선언적) - what 에 초점.

무엇을 보여주고, 만들고 싶은 지에 초점이 맞춰짐.

어떻게 동작시킬 것인지 구체적으로 적는 것 보다, 하고자 하는 것을 말하는 방식이다.

피자로 치면 피자를 원한다면 단순히 피자를 주문한다. (피자를 어떻게 만들지 상세한 내용이 아니라)

React: A Declarative UI Library

리액트는 아주 인기있는 선언적 방식으로 UI를 그리는 것을 도와주는 라이브러리다.

뭘 만들 건 지를 적기만 하면 어떻게 실제 DOM을 업데이트 시킬 것인지 step-by-step은 리액트가 한다. 따라서 쉽고 편하게 웹 코드를 작성할 수 있게 된다.

HTML, DOM, React