[AngularDart] HTML과 앵귤러 템플릿 html

일반 HTML

<div class="special">Mental Model</div>
<img src="assets/images/hero.png">
<button disable>Save</button>
<!-- 화면에 보여지는 모습을 HTML 엘리먼트 태그로 생성하고 attributes에 string 대입 -->

앵귤러 구문

<div class="special">Mental Model</div>
<!-- 아래가 새로운 구문, 앵귤러다트 컴포넌트를 새로운 엘리먼트 태그처럼 사용 -->
<my-hero></my-hero>
<!-- 아래는 데이터 바인딩을 사용한 예제 -->
<button [disabled]="isUnchanged">Save</button>

위의 앵귤러 구문 예제에서 [disabled]="isUnchanged"는 disabled 속성에 isUnchanged 값을 직접 대입하는 것이 아니라, Button의 DOM property에 disabled 프로퍼티를 세팅 하는 용도이다. (기존 HTML 구문이랑 개념이 헷갈려서는 안됨)

HTML attribute vs. DOM property

https://www.youtube.com/watch?v=Ut-ATm23_Pg

둘 차이를 이해하는 것이 앵귤러의 바인딩을 사용하는데 매우 중요함.

요약하면 HTML attribute는 DOM property를 초기화하는데만 사용되는 unchangable 값이고, 실제 화면에 뿌려주는 역할은 DOM이 수행하며 DOM의 property가 바뀌는 것이다. 그러므로 앵귤러의 데이터 바인딩은 DOM의 property에 대응한다.

Attribute는 HTML에 의해서 정의된 속성이고, Property는 DOM(Document Object Model)에 의해 정의된 속성이다.

• 일부 HTML attribute 들많이 DOM의 property로 1:1 매핑이 된다. id 속성 등이 그러하다.

• DOM property에 대응되지 않는 HTML attribute가 존재한다.

  xxxxxxxxxx
  colspan
  

  속성 등이 그러하다.

  • 근데 버전이 바뀐건지 뭔지 colspan이 TableData object에 colSpan으로 존재한다.

• HTML attribute로 표현하지 못하는 DOM property가 존재한다. textContent 등이 그러하다.

• 실제로 매핑되는 것처럼 보이는 attribute와 property가, 생각하는 것처럼 완전한 매핑이 아니다.

가장 마지막 문장을 풀이하자면 아래와 같다:

HTML의 Attribute는 DOM의 property에 대응되는 것이 아니라, 단순히 해당하는 DOM의 property를 초기화 하는데에만 사용되고 이후에는 사용되지 않는다. 이후에는 DOM property의 값만 변경되고, HTML의 attribute는 변경되지 않는다.

예를 들어 <input type="text" value="Bob"> HTML 태그를 사용할 경우, 이에 해당하는 input DOM이 생성되고 DOM의 value property의 값이 Bob으로 초기화 된다.

사용자가 인풋 박스의 내용을 Sally로 변경했을 때, DOM의 value property는 Sally로 바뀌는 반면에 HTML의 value attribute의 값은 Bob으로 남아있다. 이러한 현상은 웹 브라우저의 개발자 도구에서 input.getAttribute('value')와 input.value 를 통해서 알아볼 수 있다. 전자는 HTML의 attribute를 확인하는 코드이며 후자는 DOM의 오브젝트 property 값을 확인하는 코드이다.

첫 예제에서 사용한 disabled 속성도 특이한 매핑의 예 중 하나이다. button DOM의 disabled property는 기본적으로 false 값을 갖고 있어서, 버튼은 보통 enable 상태를 유지한다. 그러나 HTML의 attribute로 disabled 를 추가할 경우 DOM을 생성할 때 오브젝트의 disabled property를 true로 초기화하여 버튼을 disable 상태로 생성하게 된다.

HTML의 disabled attribute는 값을 조절하는게 아닌 단순히 attribute를 추가만 하는 것으로 동작하므로, disabled attribute를 사용하거나 완전히 사용하지 않거나의 두 가지 조건으로 버튼의 상태를 조절할 수 있다. 그러므로 <button disable="false">Still disabled</button> 과 같이 아무리 HTML의 disabled attribute를 false로 정하더라도 버튼은 항상 disable 상태를 유지하게 된다. attribute의 값과는 상관이 없기 때문이다.

그러나 DOM의 property인 disabled 를 조절하면 버튼의 상태를 변화시킬 수 있다. 이것이 앵귤러의 데이터바인딩의 작동 원리이다.

그러므로 HTML의 attribute와 DOM의 property의 이름이 동일하더라도 서로 다른 의미를 갖고 있음을 명심하자.

위와 같은 이유 앵귤러 템플릿의 데이터 바인딩은 property, event에 바인딩 되는 것이지 attribute에 바인딩 되는 것이 아니다.