<!-- index.html -->
<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 headerContent = document.createTextNode(
'Develop. Preview. Ship. 🚀',
);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>브라우저 개발자 도구 내부의 DOM 요소를 보면 DOM에 <h1> 요소가 포함되어 있음을 알 수 있다.
페이지의 DOM은 소스 코드로 사용자가 만든 원본 HTML 파일과 다르다는 것을 알 수 있다.
HTML은 초기 페이지 콘텐츠를 나타내는 반면 DOM은 작성한 JavaScript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타내기 때문이다.
일반 JavaScript로 DOM을 업데이트하는 것은 매우 강력하지만 장황할 수 있다. 일부 텍스트와 함께 <h1> 요소를 추가하기 위해 이 모든 코드를 작성했으니 말이다.
앱이나 팀의 규모가 커지면 이런식으로 구축한다는 것은 점점 더 어려워질 수 있다.
이런 접근 방식을 사용하면 개발자는 컴퓨터가 작업을 수행하는 방법을 코드로 알려주는 것에 더 많은 시간은 할애한다. 그렇다면 우리가 보여주고 싶은 것을 설명하고 컴퓨터가 DOM을 업데이트하는 방법을 알아내도록 하는 것이 더 좋을 것이다.
다음은 명령형 vs선언적 프로그래밍에 대해 알아보자.
'TIL' 카테고리의 다른 글
| Next.js 기초편: 리액트 시작하기 (0) | 2022.05.22 |
|---|---|
| NEXT.JS 기초편: 명령형 VS 선언적 프로그래밍 (0) | 2022.05.22 |
| [TIL] 모노레포 개념편 (0) | 2022.05.18 |
| [CSS] 2022 Trend @scroll-timeline (0) | 2022.03.03 |
댓글