02 템플릿 구문 03

바인딩 구문 : 개요

데이터 바인딩은 사용자가 보는 것을 응용프로그램 데이터 값과 조율하는 메커니즘입니다. HTML에서 값을 넣거나 가져올 수는 있지만 이러한 작업을 바인딩 프레임 워크로 바꾸면 응용프로그램을 작성하고 읽고 유지하는 것이 더 쉽습니다. 바인딩 소스와 대상 HTML 엘리먼트 사이의 바인딩을 선언하고 프레임 워크가 작동하도록합니다.

Angular는 많은 종류의 데이터 바인딩을 제공합니다. 이 가이드에서는 Angular 데이터 바인딩 및 구문에 대한 고급 수준을 설명한 후 대부분을 다루고 있습니다.

바인딩 유형은 데이터 흐름의 방향에 따라 구분되는 세 가지 범주로 그룹화 할 수 있습니다. 소스에서 뷰로(source-to-view), 뷰에서 소스로(view-to-source), 양방향 시퀀스로 뷰에서 소스 뷰로(view-to-source-to-view) 그룹화 할 수 있습니다.

데이터 방향	구문	유형
단방향 소스에서 뷰로	{{expression}} [target]="expression" bind-target="expression"	Interpolation Property Attribute Class Style
단방향 뷰에서 소스로	(target)="statement" on-target="statement"	Event
양방향	[(target)]="expression" bindon-target="expression"	Two-way

보간법 이외의 바인딩 유형은 등호 기호 왼쪽에 표제 ([], ())로 둘러싸이거나 표식 (bind-, on-, bindon-) 앞에 오는 대상 이름을 가집니다.

대상 이름은 속성(property)의 이름입니다. 그것은 속성(attribute)의 이름처럼 보일지도 모릅니다. 차이점을 이해하려면 템플릿 HTML에 대해 새롭게 생각해봐야 합니다.

 

새로운 정신 모델

데이터 바인딩의 모든 기능과 사용자 정의 마크 업으로 HTML 어휘를 확장 할 수 있기 때문에 템플릿 HTML을 HTML Plus로 생각할 수 있습니다.

정말 HTML Plus입니다. 그러나 이전에 사용하던 HTML과 크게 다릅니다. 새로운 정신 모델이 필요합니다.

HTML 개발의 일반적인 과정에서 HTML 엘리먼트로 시각적 구조를 만들고 문자열 상수로 엘리먼트 속성(attribute)을 설정하여 해당 엘리먼트를 수정합니다.

src/app/app.component.html

<div class="special">Mental Model</div> <img src="images/hero.png"> <button disabled>Save</button>

Angular 템플릿에서 구조를 만들고 속성 값을 초기화합니다.

그런 다음 HTML 캡슐화하고 기본 HTML 엘리먼트인 것처럼 템플릿에 드롭하는 컴포넌트로 새 엘리먼트를 만드는 방법을 배웁니다.

src/app/app.component.html

<!-- Normal HTML --> <div class="special">Mental Model</div> <!-- Wow! A new element! --> <hero-detail></hero-detail>

HTML Plus입니다.

그런 다음 데이터 바인딩에 대해 배웁니다. 첫 번째 바인딩은 다음과 같이 보일 수 있습니다.

src/app/app.component.html

<!-- Bind button disabled state to `isUnchanged` property --> <button [disabled]="isUnchanged">Save</button>

잠시 후 그 특유의 괄호 표기법을 익히 게 될 것입니다. 직관적으로 볼때, 버튼의 disabled 속성에 바인딩하고 컴포넌트의 isUnchanged 속성의 현재 값으로 설정하는 것으로 보입니다.

그렇지 않습니다! 일상적인 HTML 정신 모델은 오해의 소지가 있습니다. 실제로 데이터 바인딩을 시작하면 더 이상 HTML 속성을 사용하지 않습니다. 속성을 설정하지 않습니다. DOM 엘리먼트, 컴포넌트 및 디렉티브의 속성을 설정하고 있습니다.

이 사실은 반복됩니다. 템플리트 바인딩은 속성(attribute)이 아닌 속성(property) 및 이벤트와 함께 작동합니다.

 

바인딩 타겟

데이터 바인딩의 대상은 DOM에 있습니다. 바인딩 유형에 따라 대상은 (엘리먼트 | 컴포넌트 | 지시어) 속성, (엘리먼트|컴포넌트|지시어) 이벤트 또는 (거의없지만)속성이름이 될 수 있습니다. 다음 표는 요약한 내용입니다.

유형	타겟	예제
Property	Element property Component property Directive property	<img [src]="heroImageUrl"> <hero-detail [hero]="currentHero"></hero-detail> <div [ngClass]="{'special': isSpecial}"></div>
Event	Element event Component event Directive event	<button (click)="onSave()">Save</button> <hero-detail (deleteRequest)="deleteHero()"></hero-detail> <div (myClick)="clicked=$event" clickable>click me</div>
Two-way	Event and property	<input [(ngModel)]="name">
Attribute	Attribute (the exception)	<button [attr.aria-label]="help">help</button>
Class	class속성	<div [class.special]="isSpecial">Special</div>
Style	style 속성	<button [style.color]="isSpecial ? 'red' : 'green'">

이 넓은 관점을 염두에두고 바인딩 유형을 자세하게 볼 준비가 되었습니다.