[Angular2] 1. Component 소개 (1)

1. Component

컴포넌트는 애플리케이션의 화면 단을 구성하는 중요한 구성요소이다. Angular에서 화면을 구성하는 요소는 컴포넌트로서, Angular에서는 컴포넌트를 중심으로 개발을 진행 한다.

1. 1 Web Component

Angular Component는 W3C 표준인 Web Component 기술을 기반으로 합니다. Web Component를 알아보면 Angular Component를 이해하기 쉽습니다.

Web Component 기술은 하나의 기능이 아니라 HTML, CSS, JavaScript 가 합해져 하나의 Web Component를 구성합니다. Web Component의 기술요소는 다음과 같습니다.

HTML Template

Template 호출

Shadow DOM

Custom Element

* Web Component는 비교적 최근에 나온 기술이기 때문에 Web Component를 이용하려면 webcomponent.js 또는 polymer 같은 보완 라이브러리를 이용 합니다.

- HTML Template

HTML Template은 Component의 UI를 표현하는 영역입니다. 웹 페이지의 일부분으로 동작하며, 재사용 가능하다는 특징이 있다

1 2 3 4 5 6 7 < template id = "nav-item-template" > < div class = 'nav' > < div class = "item" >메인 < div class = "item" >소개 < div class = "item" >로그인 cs

- Template 호출

Template을 정의 했다면 외부에서 link 엘리먼트를 이용해 Template을 호출할 수 있습니다.

1 2 3 4 < head > < link rel = "import" href = "template.html" > < link rel = "import" href = "template1.html" > Colored by Color Scripter cs

Template을 실제로 사용하려면 쿼리 선택자를 이용해 선택한 Template 노드를 현재 문서의 DOM 노드 밑으로 붙입니다.

1 2 3 4 5 6 < script > var link = document .querySelector( 'link[rel="import"]' ); var content = link.import; var el = content .querySelector( '#template' ); document .body.appendChild(el.cloneNode( true )); Colored by Color Scripter cs

- Shadow DOM

DOM (Document Object Model)에는 엘리먼트에 대한 정의나 스타일과 같은 각종 정보가 저장됩니다. 웹 페이지는 기본적으로 DOM을 가집니다.

DOM은 크게 Document DOM과 Shadow DOM으로 나뉩니다. Document DOM은 현재 페이지에 대한 DOM입니다. Shadow DOM은 웹 페이지가 실행되는 도중 가상으로 생성되는 DOM입니다. 외부와 분리되고 접근이 자유롭지 않은 특징을 가집니다. Shadow DOM은 Document DOM과 분리되어 존재하고 Shadow DOM은 Document DOM에서 정의한 스타일이나 이벤트가 적용되지 않고 캡슐와 됩니다.

Shadow DOM에 대해서는 추후에 더 자세히 알아보겠습니다.

- Custom Element

Custom Element는 엘리먼트 이름을 임의로 정의해서 만든 엘리먼트입니다.

1 < hello-button > cs

위의 hello-button 엘리먼트는 모양이 없고 기능도 없는 빈 엘리먼트 입니다. 그러나 실제로 hello-button 엘리먼트는 내부적으로 다음과 같이 이벤트를 추가하여 독립 컴퍼넌트로 정의 할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 < !doctype html > < html > < head > < meta charset = "utf-8" / > < script > var proto = Object .create(HTMLElement. prototype ); proto.createdCallback = function () { var shadow = this.createShadowRoot(); var button = document .createElement( 'button' ); button.className = 'btn' ; button.innerHTML = "Hello Button" ; button.style.fontStyle = "20px" ; shadow.appendChild(button); button. addEventListener ( 'click' , function (e) { alert ( "Clicked!" ); }); }; document .registerElement( 'hello-button' , { prototype : proto }); < style > .btn { font-size : 50px ; } < body > < hello-button > Colored by Color Scripter

위의 예제와 같이 엘리먼트의 이름은 임의로 정해서 추가할 수 있으며 Custom Element는 빈 엘리먼트가 아닌 기능과 모양이 합쳐진 화면 구성요소입니다. 예제를 실행하면 버튼이 나타나고 버튼을 클릭하면 다음과 같은 알림창이 나타난다

- Web Component 와 Angular2 Component

Web Component는 Angular2 Component의 기반 기술입니다. Angular가 사용하는 Web Component기술은 다음과 같습니다.

Angular의 템플릿은 Web Component 기술의 템플릿 기술을 이용합니다.

Angular에서 템플릿 호출 기능은 웹 컴포넌트의 호출 기술을 이용합니다.

Angular Component는 문서 트리에 영향 받지 않는 Shadow DOM을 이용합니다.

Angular Component의 엘리먼트 이름은 Web Component의 Custom Element 기술을 이용합니다.

Angular Component는 기존 Web Component 기술을 쉽게 이용할 수 있도록 구조적으로 견고하게 구성할 수 있게 하였습니다.

출처 : 정진욱, 『쉽고 빠르게 배우는 Angular2 프로그래밍』, 80~83

from http://daehohoya.tistory.com/4 by ccl(A) rewrite - 2020-03-07 09:55:21