결과는 다음과 같습니다.
▲ 그림 3-1 HTML 블록에서 하위 컴포넌트 사용
이렇게 “HTML 블록에 하위 컴포넌트를 <MyView> 형태로 다른 HTML 엘리먼트처럼 삽입하여 사용할 수 있다” 정도로 알아두고, 스벨트 사용에 핵심 중 하나인 컴포넌트 사용은 7장 하위 컴포넌트 사용에서 기대해주세요.
참고
HTML 엘리먼트(element)는 태그(tag)와 달라요
HTML 엘리먼트는 구성하는 객체를 부르는 호칭입니다.
예를 들어 HTML 문서의 p 엘리먼트는 문단(paragraph)을 말하지만 실제로 HTML 문서 안에는 <p></p> 형태의 태그로 존재합니다. 이때 <p>를 p 엘리먼트의 시작 태그, </p>를 p엘리먼트의 종료 태그라고 합니다.
button 엘리먼트로 예를 들어 볼까요? button 엘리먼트는 <button> 태그로 시작하고 </button> 태그로 종료합니다. 쉽죠? 정리해보면 다음과 같습니다.
• p 엘리먼트 - <p> + 콘텐츠 + </p>
• HTML 엘리먼트 - 시작 태그 + 콘텐츠 + 종료 태그
▲ 그림 3-2 엘리먼트와 태그