데이터 바인딩은 컴포넌트의 클래스와 그 템플릿을 연결합니다. Angular에는 데이터 흐름의 방향과 고유한 구문으로 구분되는 네 가지 형태가 있습니다.
1. 보간(Interpolation) — 클래스 → 뷰 (텍스트)
html
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- DOM 프로퍼티에 바인딩 -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- 컴포넌트의 @Input으로 전달 -->
대괄호 [ ]는 프로퍼티를 표현식에 바인딩합니다(단방향, 데이터가 뷰 아래로 흐름).
<button (click)="save()">Save</button> <!-- DOM 이벤트 → 메서드 -->
<input (input)="onInput($event)" /> <!-- $event = 이벤트 객체 -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- 컴포넌트의 @Output -->
소괄호 ( )는 이벤트를 수신합니다(단방향, 데이터가 뷰에서 클래스로 위로 흐름).
<input [(ngModel)]="name" /> <!-- "바나나 인 어 박스" [()] -->
<p>{{ name }}</p> <!-- 입력하는 대로 동기화 유지 -->
[(...)] 구문("바나나 인 어 박스")은 양방향 동기화를 위해 속성 바인딩 + 이벤트 바인딩을 결합합니다. 가장 흔하게는 폼 입력에서 ngModel과 함께 사용됩니다.
{{ }} → 보간 (클래스 → 뷰, 텍스트)
[ ] → 속성 (클래스 → 뷰)
( ) → 이벤트 (뷰 → 클래스)
[( )] → 양방향 (양쪽) — 말 그대로 [ ] + ( )
양방향 [()]는 단지 속성 바인딩 []과 이벤트 바인딩 ()을 결합한 것입니다. 괄호가 방향을 나타냅니다.
데이터 바인딩은 Angular가 클래스와 템플릿을 동기화 상태로 유지하는 방법으로, 모든 동적 UI 뒤에 있는 메커니즘입니다.
네 가지 유형과 그 구문({{}}, [], (), [()]), 그리고 각각이 흐르는 방향을 아는 것은 어떤 Angular 템플릿을 읽고 쓰는 데에도 필수적입니다. Angular 템플릿의 거의 모든 줄이 이 중 하나를 사용합니다.