Angular 데이터 바인딩 I (String Interpolation)

Angular에는 Data를 표출하는 방법이 다양하게 있습니다.

그 중 가장 간단한 방법인 String Interpolation을 보도록 할게요.

ts 클래스의 변수를 template html에서 가져와 보여주는 것입니다.

이렇게 하는 것이 무슨 도움이 될까요?

먼저 비즈니스 로직과 보여주는 뷰를 분리할 수 있습니다.

html 화면을 변수들로 구성한 후 ts 파일에서 로직만 구현하면 되는거죠.

그리고 정적인 html이지만 data의 변화를 통해 동적으로 보일 수 있습니다.

말보다 예를 들어 설명하는 것이 빠르겠죠?

지난 번 만들었던 budget.component.ts 파일을 수정하겠습니다.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    template: `<h3>My Budget: ₩{{budget}}</h3>`,
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

Angular 관련 주목할 만한 부분이 2군데 입니다.

6번째줄의 template 속성과 {{ }} 괄호 입니다.

ECMA6에 등장하는 Template String ` (back-tick)도 있습니다만.. 

Angular에 집중하기 위해 생략하겠습니다.

지난번 CLI로 생성해준 ts 파일에는 templateUrl 속성이 있었습니다.

하지만 template이 간단한 경우 굳이 파일이 아니어도 됩니다.

위와 같이 template이라는 속성에 inline으로 html을 작성해도 되죠.

그럼 더이상 budget.component.html은 필요가 없습니다.

하지만 나중에 사용할 예정이니 놔두도록 하겠습니다.

오늘 더 중요한 부분은 {{ }} : String Interpolation 기능입니다.

ts 코드에서 사용하는 변수 budget을 html 코드에 출력할 수 있습니다.

위의 코드와 같이 중괄호 사이에 변수명을 넣어주면 됩니다.

간단히 코드를 설명하자면, 1초에 한번씩 budget 값을 1000씩 올립니다.

ts 코드의 budget 값이 변함에 따라 아래와 같이 화면의 금액이 변하죠.

저의 실제 예산도 1초에 1000원씩 증가하면 얼마나 좋을까요..?

String Interpolation을 이용한 화면

매우 쉽게 화면에 변화를 줄 수 있습니다.

JavaScript로 DOM을 제어하면 되지 않냐구요? 맞습니다. 

그러나 Angular의 장점들은 아직 많으니 천천히 보자구요.

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