Angular 데이터 바인딩 III (ngModel)

html과 ts파일 간 바인딩을 살펴보고 있는데요.

지금까지는 단방향의 바인딩을 사용해보았습니다.

요약하면 아래 3가지네요.

{}: String Interpolation 

[]: Property Binding 

(): Event Binding 

이번에는 양방향 데이터 바인딩을 보겠습니다.

ngModel 이라는 directive를 이용하는 건데요.

생소한 용어가 2가지 있습니다.

ngModel은 html과 ts가 양방향으로 묶여있다는 개념입니다.

사용 예시를 보면서 좀 더 설명하구요.

directive는 나중에 자세히 다뤄보겠습니다.

ngModel을 사용하기 위해서는 FormsModule이 필요합니다.

import { FormsModule } from '@angular/forms';

@NgModule({
    ...,
    imports: [ 
        FormsModule
    ],
    ...
})
export class AppModule { }

위와 같이 app.module.ts 파일에 이를 명시해주도록 하죠. 

(불필요한 코드는 생략하고 추가된 코드만 넣었습니다.)

그리고 html 파일에 ngModule을 이용하기 위한 코드를 추가하겠습니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [(ngModel)]="budget">
<button (click)="onAddIncome()">Add Income</button>

위 코드에서 중요한 부분은 [(ngModel)] 입니다.

일명 banana syntax 라고 하는 [()]로 ngModel을 감싸줍니다.

결과 화면은 아래와 같습니다.

ngModel을 활용한 바인딩

위와 같이 html의 input 값이 바뀌면 ts의 budget 값이 바뀝니다.

마치 html과 ts의 값이 바로 엮여있는 듯한 느낌이 들죠.

하지만 엄밀히 말하면 양방향 바인딩은 존재하지 않습니다.

내부적으로 프로퍼티 바인딩과 이벤트 바인딩을 쓰죠.

[(ngModel)]은 내부적으로 아래와 같이 동작합니다.

[ngModel]="budget", (ngModelChange)="budget =$event"

양방향 바인딩은 개발 편의를 위한 syntax라고 봐야겠죠.

진행하고 있는 코드는 github에서 자유롭게 볼 수 있습니다.

소스주소: https://github.com/jsrho1023/account-book