02 템플릿 구문 08

양방향 바인딩 ( [(...)] )

사용자가 변경하면 데이터 프로퍼티를 표시하고 해당 프로퍼터를 업데이트하는 것이 좋습니다.

엘리먼트 측면에서 특정 엘리먼트 프로퍼티를 설정하고 엘리먼트 변경 이벤트를 수신하는 조합을 취합니다.

Angular는 이 목적을 위해 특별한 양방향 데이터 바인딩 구문 [(x)]을 제공합니다. [(x)] 구문은 프로퍼티 바인딩의 대괄호 [x]를 이벤트 바인딩의 괄호 (x)와 결합합니다.

[( )] = 박스 안의 바나나

괄호가 대괄호 안에 들어가는 것을 기억할 수 있도록 박스에 바나나를 시각화

[(x)] 구문은 엘리먼트에 x라는 설정 가능한 프로퍼티가 있고 xChange라는 해당 이벤트가 있다는 것을 쉽게 보여줍니다. 다음예는 패턴에 맞는 SizerComponent가 있습니다. 이것은 size 값 프로퍼티와 동반 sizeChange 이벤트를 가지고 있습니다 :

src/app/sizer.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';   @Component({   selector: 'my-sizer',   template: `   <div>     <button (click)="dec()" title="smaller">-</button>     <button (click)="inc()" title="bigger">+</button>     <label [style.font-size.px]="size">FontSize: {{size}}px</label>   </div>` }) export class SizerComponent {   @Input()  size: number | string;   @Output() sizeChange = new EventEmitter<number>();     dec() { this.resize(-1); }   inc() { this.resize(+1); }     resize(delta: number) {     this.size = Math.min(40, Math.max(8, +this.size + delta));     this.sizeChange.emit(this.size);   } }

초기 size는 프로퍼티 바인딩의 입력 값입니다. 버튼을 클릭하면 최소 / 최대 값 한계 안에서 크기가 증가 또는 감소 된 다음 조정 된 크기로 sizeChange 이벤트가 발생 (방출)됩니다.

다음은 AppComponent.fontSizePx가 SizerComponent에 양방향으로 바인딩되는 예입니다.

src/app/app.component.html (two-way-1)

<my-sizer [(size)]="fontSizePx"></my-sizer> <div [style.font-size.px]="fontSizePx">Resizable Text</div>

AppComponent.fontSizePx는 초기 SizerComponent.size 값을 설정합니다. 버튼을 클릭하면 양방향 바인딩을 통해 AppComponent.fontSizePx가 업데이트됩니다. 수정된 AppComponent.fontSizePx 값은 스타일 바인딩에 전달되어 표시된 텍스트를 더 크게 또는 작게 만듭니다.

양방향 바인딩 구문은 실제로 프로퍼티 바인딩과 이벤트 바인딩을 위한 구문 설탕입니다. Angular 다음과 같이 izerComponent바인딩을 디슈거(desugar)합니다.

desugar : 컴퓨터 프로그램 (또는 그 명세)의 소스 코드를 구문 론적으로 더 엄격한 형식으로 번역하기

 

src/app/app.component.html (two-way-2)

<my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>

$event 변수에는 SizerComponent.sizeChange 이벤트의 페이로드가 포함됩니다. Angular는 사용자가 버튼을 클릭 할 때 AppComponent.fontSizePx에 $event 값을 할당합니다.

분명히 양방향 바인딩 구문은 별도의 프로퍼티 및 이벤트 바인딩과 비교할 때 매우 편리합니다.

<input> 및 <select>와 같은 HTML 폼 엘리먼트와 양방향 바인딩을 사용하면 편리합니다. 그러나 네이티브 HTML 엘리먼트는 x 값 및 xChange 이벤트 패턴을 따르지 않습니다.

다행스럽게도 Angular NgModel 지시어는 폼 엘리먼트에 양방향 바인딩을 가능하게 하는 다리입니다.