JS 단원 08: document 접근 없이 HTML 다루는 최신 방식

1. 왜 document 직접 조작을 지양하는가?

• 유지보수가 어렵고 코드가 복잡해짐
• 여러 위치에서 DOM 조작 시 충돌 위험
• 테스트, 상태 추적 어려움

2. 템플릿 태그 (<template>)

• HTML 조각을 정의하고 JavaScript로 복제하여 삽입

<template id="item-template">
  <li class="item">템플릿 항목</li>
</template>

const tpl = document.getElementById("item-template");
const clone = tpl.content.cloneNode(true);
document.querySelector("ul").appendChild(clone);

• 문서에 바로 표시되지 않음
• 반복 구조, 다이나믹 콘텐츠에 유용

3. dataset 속성 사용

<button data-id="123">삭제</button>

const id = event.target.dataset.id;

• HTML과 JS 간 데이터 전달을 직관적으로 수행
• data-* 속성은 DOM에서 dataset으로 접근

4. 웹 컴포넌트 소개

• HTML 요소를 직접 정의할 수 있는 브라우저 내장 기능
• Custom Elements + Shadow DOM + HTML Template의 조합

Custom Element 정의

class MyTitle extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<h1>커스텀 타이틀</h1>";
  }
}
customElements.define("my-title", MyTitle);

<my-title></my-title>

5. Shadow DOM

• 스타일과 DOM 구조를 외부로부터 격리
• 캡슐화된 UI 구성 가능

const shadowHost = document.querySelector("#shadow-host");
const shadow = shadowHost.attachShadow({ mode: "open" });
shadow.innerHTML = "<style>p { color: red; }</style><p>쉐도우 콘텐츠</p>";

• 외부 스타일과 충돌 없음
• 컴포넌트 단위 유지보수에 최적

6. React의 Virtual DOM 접근

function App() {
  return <div className="box">안녕하세요</div>;
}

• 실제 DOM 대신 메모리상의 Virtual DOM으로 구성
• 상태 변화 시 diff 비교 후 최소 변경만 실제 DOM에 반영

장점:

• 직접 document 접근 없이 선언적 코드 작성
• 렌더링 성능 최적화

7. innerHTML 최소화 이유

el.innerHTML = "<p>안전할까?</p>";

• 보안 이슈 (XSS)
• 파싱 비용, 이벤트 바인딩 손실
• 대신 createElement, appendChild 등 DOM API 사용 권장

8. 현대적인 HTML 다루기 전략 요약

요약

• document 직접 조작 대신 템플릿, dataset, 웹 컴포넌트, 라이브러리 활용 권장
• Shadow DOM으로 구조 및 스타일을 격리
• React 등의 프레임워크는 가상 DOM으로 선언적 UI 구현
• innerHTML은 보안 및 성능 문제로 최소화

심화학습

Q1. 템플릿 태그와 innerHTML 사용의 차이는?
A1. innerHTML은 문자열을 파싱하고 삽입하며 이벤트를 잃을 수 있고, 템플릿은 DOM을 안전하게 복제하여 삽입합니다.

Q2. Shadow DOM의 가장 큰 장점은 무엇인가요?
A2. 컴포넌트의 스타일과 구조를 외부와 완전히 분리하여 안정성과 재사용성이 높아집니다.

Q3. dataset 속성이 props 전달 방식과 비슷한 이유는?
A3. HTML에 데이터를 명시하고 JavaScript에서 접근하는 구조로, 컴포넌트간 속성 전달과 유사한 패턴을 형성합니다.