(3) ngModel 사용해보기

저번에는 간단하게 텍스트를 변경해봤는데 이번엔 제가 입력한대로 타이틀을 변경 시키고 싶습니다.

그런데 app.component.html 에 너무 내용이 많아 모두 삭제하고 다음과 같이 수정!

 

<input type="text" [(ngModel)]="title">
<h1>{{ title }}</h1>

 

여기서 [(ngModel)] 이게 뭘까요?

 

설명하기 전에 데이터바인딩이 뭔지 알아야 하는데 이건 검색하면 수두룩하게 나오니 패스ㅋ 처음 이해하기 쉽게 말하면 말 그대로 데이터를 묶어 일치 시키는 것이라고 생각하면 될 것 같습니다. 이것도 뭔 소린지 모르겠다면 이따가 동작해보면 알게 됩니다!

 

다시 이 [(ngModel)] 이란 것은 양방향 데이터 바인딩하는데 사용되는 앵귤러 문법입니다. 하지만 찾아보니 정확하게 양방향 바인딩은 아니고 [ngModel]="title", (ngModelChange)="title=$event"  구조의 축약표현이라고 합니다. 결과적으로는 양방향인 것처럼 동작하니 처음엔 그냥 일단은 다 잊어버리고 양방향이라고 생각하면 될 것 같아용ㅎㅎ 앵귤러에 익숙해지면 저절로 알게 될 것들일테니까요!

 

위 소스대로 수정하고 페이지를 보면 그냥 흰 화면만 보일 겁니다. 당황하지 마시고 크롬 개발자 모드 f12 (크롬쓰세요 크롬ㅎㅎ) 키면 

 

input 의 알려진 속성이 아니라서 ngModel 에 bind 할 수 없다. ngModel 을 제대로 읽지 못하는 것 같습니다. 앵귤러에는 여러 모듈이 있습니다. ngModel 을 사용하기 위해서는 FormsModule 이라는 특정 기능을 추가해야 합니다. 추가하려면 아직 보지 않았던 app.module.ts 로 이동 ㄱㄱ! app.module.ts 파일은 기본적으로 다른 패키지를 가져오는데 사용됩니다.

 

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

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

 

위 처럼 FormsModule 을 추가! 저장하면 앱이 다시 빌드되고 다음과 같이 화면이 뜹니다.

 

얍! 데이터바인딩!

위 input의 값과 밑에 값이 일치하죠. 이게 ngModel 데이터바인딩입니다! [(ngModel)]="title" 을 함으로써 입력하는 값이 title이 되고 title은 view와 model 이 묶여 값이 일치하도록 합니다. 우앙 신기하당ㅎㅎ

 

저도 공부하면서 올리는 글이기에 혹시 틀린 부분 있으면 지적해주시면 감사하겠습니다.

이상으로 마치겠습니다.