자바스크립트와 DOM 메서드를 사용하여 UI 업데이트하기
이제 어떻게 JavaScript와 DOM 메서드를 사용하여 프로젝트에 h1 태그를 추가할 수 있는지 살펴보겠습니다.
코드 편집기를 열고 새로운 index.html 파일을 생성하세요. HTML 파일 내부에 다음 코드를 추가하세요.
<!-- index.html -->
<html>
<body>
<div></div>
</body>
</html>
그런 다음 div에 고유한 id를 지정하여 나중에 대상으로 선택할 수 있게 만드세요.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
</body>
</html>
HTML 파일 내부에서 JavaScript를 작성하려면 script 태그를 추가하세요.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>
이제 script 태그 내부에서 DOM 메서드인 getElementById()를 사용하여 id로 <div> 요소를 선택할 수 있습니다.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>
DOM 메서드를 계속 사용하여 새로운 <h1> 요소를 생성할 수 있습니다.
<!-- 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>모든 것이 제대로 작동하는지 확인하려면 HTML 파일을 원하는 브라우저에서 열어보세요. 'Develop. Preview. Ship. 🚀'라는 내용을 담은 h1 태그가 표시되어야 합니다.
HTML 대 DOM
브라우저 개발자 도구 내의 DOM 요소를 살펴보면 DOM에 <h1> 요소가 포함되어 있음을 알 수 있습니다. 페이지의 DOM은 원본 HTML 파일과 다릅니다. 즉, 처음에 생성한 원본 HTML 파일과는 다른 내용을 담고 있습니다.
이는 HTML이 초기 페이지 콘텐츠를 나타내는 반면, DOM은 작성한 JavaScript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타냅니다.
순수 JavaScript로 DOM을 업데이트하는 것은 강력하지만 장황할 수 있습니다. 여러분은 이 모든 코드를 사용하여 <h1> 요소에 텍스트를 추가하였습니다.
<!-- index.html -->
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
header.appendChild(headerContent);
app.appendChild(header);
</script>
앱이나 팀의 크기가 커질수록 이 방식으로 애플리케이션을 구축하는 것은 점점 어려워질 수 있습니다.
이 접근 방식에서는 개발자가 컴퓨터에게 작업 방법을 지시하는 명령을 작성하는 데 많은 시간을 소비합니다. 그런데 DOM 메서드를 작성하는 대신에 무엇을 표시하고 싶은지 선언하고 컴퓨터가 DOM을 어떻게 업데이트할지 알아서 결정하는 것이 좋지 않을까요?
명령형 vs 선언형 프로그래밍
위의 코드는 명령형 프로그래밍의 좋은 예입니다. 사용자 인터페이스가 어떻게 업데이트되어야 하는지에 대한 단계를 작성하고 있습니다. 그러나 사용자 인터페이스를 구축하는 경우 선언적 접근 방식이 종종 선호됩니다. 왜냐하면 선언적 방식은 개발 프로세스를 가속화할 수 있기 때문입니다. DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용(이 경우 텍스트가 있는 h1 태그)을 선언할 수 있으면 유용할 것입니다.
다시 말해, 명령형 프로그래밍은 요리사에게 피자를 만드는 방법에 대한 단계별 지침을 제공하는 것과 유사합니다. 선언적 프로그래밍은 피자가 만들어지는 과정에 관심을 두지 않고 피자를 주문하는 것과 유사합니다. 🍕
개발자가 사용자 인터페이스를 구축하는 데 도움을 주는 인기 있는 선언적 라이브러리가 React입니다.
React: 선언적 UI 라이브러리
개발자로서 React에게 어떤 일이 일어나길 원하는지 알릴 수 있고, React는 대신 DOM을 업데이트하는 방법을 결정합니다.
'Dev > Next JS' 카테고리의 다른 글
| [공식문서] JavaScript에서 React로 #5 (0) | 2023.08.11 |
|---|---|
| [공식문서] JavaScript에서 React로 #4 (0) | 2023.08.11 |
| [공식문서] JavaScript에서 React로 #3 (0) | 2023.08.11 |
| [공식문서] JavaScript에서 React로 (0) | 2023.08.10 |
| [공식문서] Next.js 란 무엇인가? (0) | 2023.08.10 |
