Step 4 Angular, Data Binding !

Data Binding 

( 원본 출처 : https://moon9342.github.io/angular-lecture-databinding )

Angular는 View와 Component에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 기능을 제공하는데 이를 Data Binding( 데이터 바인딩 )이라고 합니다.

Angular의 데이터 바인딩은 다음과 같이 크게 두가지 종류가 있습니다.

- Two-Way Data Binding : 일반적으로 양방향 바인딩이라고 합니다. Component와 View의 상태 정보를 자동으로 일치시켜 주는 기능입니다.

- One-Way Data Binding : 일반적으로 단방향 바인딩이라고 합니다. Component에서 View쪽으로 혹은 View에서 Component쪽으로 한 방향으로 데이터를 바인딩 해주는 기능입니다.

위와 같이 크게 두 가지 바인딩이 있지만 실제로 양방향 바인딩은 내부적으로 두개의 단방향 바인딩으로 구성됩니다. 기존 AngularJS 는 다른 방식으로 양방향 바인딩을 제공했는데 성능상의 문제가 많아서 Angular에서는 이를 단방향 바인딩 2개를 이용해서 기존의 양방향 바인딩처럼 이용할 수 있도록 제공해 주고 있습니다.

단방향 바인딩은 다음과 같이 다시 세가지 방식으로 나누어 집니다 .

- Two-Way Data Binding 

1. Interpolation : Component에서 선언한 속성을 View에서 사용하는 경우입니다.

3. Event bidning : View의 DOM에 대한 Event handler로 Component의 method를 사용하는 경우입니다. 

2. Property binding : View의 DOM이 소유한 HTML Element property를 []를 이용하여 binding하는 경우입니다. 

위에서 간단하게 Data Binding의 종류와 형태를 살펴보았는데 이전 예제를 이용해서 각각을 코드로 살펴보겠습니다.

1. Interpolation

page-search-main.component.html 파일의 label 을 다음과같이 수정합니다.

 <label for="search">Now Keyword : {{keyword}}</label> 

그리고 난 후, page-search-main.component.ts 파일의 PageSearchMainComponent Class에 다음을 추가 합니다.

 keyword = 'My name is Nina :-) '; 

실행 시켜보면 다음과같이 Now Keyword의 값이 ts 파일에 추가 한 데이터로 출력이 됩니다 :-) 

2. Event Binding

Event bidnging 역시 단방향 바인딩의 한 종류로 DOM의 Event Handler로 Component의 method를 활용할 수 있는 방법입니다.

search-box Component의 View에서 Search 버튼을 클릭하면 입력된 키워드가 위쪽 Toolbar 영역에 출력되도록 코드를 작성하면 다음과 같습니다.

<div class="jumbotron">

<label for="search">Now Keyword : {{keyword}}</label>

<div>

<input class="form-control w-25 float-left" #inputkeyword　id="keywordBox"

type="text" placeholder="Keyword">

<button (click)="setKeyword(inputKeyword.value)" class="btn btn-default">Change</button>

</div>

</div>

그리고 page-search-main.component.ts 파일도 다음과같이 수정 해 줍니다.

export class SearchBoxComponent implements OnInit {

keyword = 'Java';

constructor() { }

ngOnInit() {

}

setKeyword(keyword: string): void {

this.keyword = keyword;

}

}

위의 코드는 버튼을 클릭했을 때 Template Reference Variable을 이용하여 키워드 입력상자에서 사용자가 입력한 검색 keyword 값을 가져와 Component의 method를 호출하여 Component 속성의 값을 변화시킵니다. 이렇게 변경된 Component의 속성은 interpolation을 통해 다시 View에 출력되게 됩니다.

Two-Way Data Binding

이번에는 양방향 바인딩에 대해서 알아보겠습니다. 위에서 설명한 Search버튼은 입력된 키워드를 기반으로 실제 검색을 하기 위한 버튼이지 검색어를 위쪽 Toolbar 영역에 출력하기 위한 버튼은 아닙니다. 해서 키워드 입력상자( input ) 상자에 키워드를 입력할 때 사용자가 입력한 내용이 위쪽 Toolbar 영역에 출력되도록 처리해보겠습니다.

양방향 바인딩을 사용하는 가장 쉬운 방법은 FormsModule이 제공하는 NgModel directive를 이용하는 것입니다. 따라서 먼저 FormsModule을 import하는 부분부터 처리해 주셔야 합니다. page-search.module.ts 파일에 FormsModule에 대한 import 처리를 합니다.

// 양방향 바인딩을 위한 FormsModule import

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

// COMPOSITION_BUFFER_MODE import 한글 데이터 바인딩을 위한 설정

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

@NgModule({

imports: [

CommonModule,

FormsModule

],

providers: [

{

provide: COMPOSITION_BUFFER_MODE,

useValue: false

}

],

declarations: [PageSearchMainComponent]

})

export class PageSearchModule { }

page-search-main.component.html 파일의 input 에  [(ngModel)]="keyword" 옵션을 추가합니다.

<div class="jumbotron">

<label for="search">Now Keyword : {{keyword}}</label>

<div>

<input class="form-control w-25 float-left" #inputkeyword　id="keywordBox" type="text"

placeholder="Keyword" [(ngmodel)]="keyword" (click)="inputKeyword.value=''">

<button (click)="setKeyword(inputKeyword.value)" class="btn btn-default">Change</button>

</div>

</div>

실행을 시켜보시면 키워드 입력상자에 글자를 입력할 때 상단의 키워드 표시영역에 같이 출력되는 것을 보실 수 있습니다. 이렇게 양방향 바인딩이 설정되어 있을 때 사용자가 글자를 입력하면 NgModel로 바인딩한 값이 변경이 됩니다. 이 때 이벤트가 하나 발생하는데 이 이벤트를 처리하기 위해 ngModelChange를 이용할 수 있습니다.

input text 의 (click)="inputKeyword.value=''" 옵션은 텍스트 필드를 클릭 했을 때, value 값을 없애주는 부분입니다.