데이터 바인딩 이란?
Data Binding 은 Angular에만 존재하는 개념이 아닙니다. 기존의 공학적 측면에서의 Data Binding은 응용 프로그램의 UI와 비즈니스 논리를 서로 연결하는 프로세스입니다. 마찬가지로 로직을 담당하는 컴포넌트와 UI를 나타내는 Template 를 구성요소로 하는 Angular에서의 Data Binding은 이 둘 사이의 '통신(커뮤니케이션)' 이라고 표햔하는 것이 조금더 자연스러울 수도 있을 것 같습니다.
결론적으로 Angular와 같은 Framework 관점에서 Data Binding은 데이터 및 템플릿과 비즈니스로직(컴포넌트) 간의 상호작용 입니다. 또는 모델과 뷰, 구성요소간의 데이터 동기화 라고 표현해도 좋을 것 같습니다. 동적 콘텐츠에 관련된 모든 것에는 Data Binding이 필수적이기 때문에 소프트웨어 개발 프로세스에서 빼놓을 수 없는 중요한 기능이라고 할 수 있습니다. Angular는 다양한 Data Binding 옵션을 가지고 있으며, 이것이 Angular 가 중대형 프로젝트에서 큰힘을 발휘하고 주목받는 이유중 한가지라고 할 수 있습니다.
데이터 바인딩과 방향성
Angular Data Binding에 대해 검색하다보면 자주 보게되는 그림입니다. DOM과 Component 사이의 바인딩의 방향성을 잘 나타내고는 있지만 Binding의 '타입'과 '분류'를 명확히 나타내주지 않는 것 같았습니다. 위의 방향성을 보면 Interpolation과 Event Binding 역시 One Way Binding인데 Property Binding만 One Way Binding을 명시해준 것과 이외에도 다른 타입이 있지 않을까하는 생각들... Data Binding에 대해 좀더 명확하고 자세히 분류된 자료를 찾던 중 Angular.io(https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax)의 Binding Syntax에 관한 도표에서 원하던 정보를 얻을 수 있었고 이것을 참조하여 Binding Type, Direction에 대해 도표로 정리해 보았습니다.
- Data Direction에 따른 7가지 Data Binding Type -
Data Direction |
Type |
Target |
Example |
Syntax |
|
One-way |
Data source (DOM) View target (Component) |
Interpolation
|
Between HTML element tags |
<h2>{{hero.name}} details!</h2>
|
{{expression}} |
Property |
Element property Component property Directive property |
<img [src]="heroImageUrl">
<hero-detail [hero]="currentHero"></hero-detail>
<div [ngClass]="{special: isSpecial}"></div> |
[target]=“expression”
(short form)
or
bind-target=“expression”
(canonical form) |
||
Attribute |
Attribute (the exception) |
<button [attr.aria-label]="help">help</button> |
|||
Class
|
Class property |
<div [class.special]="isSpecial">Special</div>
|
|||
Style
|
Style property |
<button [style.color]="isSpecial ? 'red' : 'green'">
|
|||
View target (Component) Data source (DOM) |
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> |
(target)=“statement”
(short form)
or
on-target=“statement”
(canonical form) |
|
Two-way | Two-way |
Event and property |
<input [(ngModel)]="hero.name"placeholder="name">
|
[(target)]=“expression”
(short form)
or
bindon-target=“expression”
(canonical form) | |
가장 크게 One way와 Two way 방식으로 나누어 지며 One way 방식은 Data source(DOM)과 View target(Component)에 대한 Direction에 따라 한번 더 나누어집니다. Data Binding Type은 7가지로 분류되며 각 Type에 대한 Target과 Syntax를 위의 도표로 정리하였습니다. Two-way의 가장 큰 특징은 Event Binding과 Property Binding의 결합이라는 점 입니다. 또한 Angular는 Syntax에서 Interpolation을 제외하고 우리가 흔히 사용하는 short form과 canonical form방식 또한 제공합니다.
참조
https://jinalshahblog.wordpress.com/2016/12/01/introduction-to-data-bindings-in-angular2/ :: 데이터 바인딩 개념, 데이터 바인딩 방향성
http://han41858.tistory.com/23 :: 데이터 바인딩 방향성
https://github.com/angular/angular/blob/aa98fad338b314cc592ce8d5cc5a552c005c2abc/modules/angular2/docs/core/01_templates.md#summary :: Angular2 Templates