Data binding

- 템플릿(View)과 컴포넌트 클래스의 데이터(Model)을 하나로 묶어 유기적으로 동작하게 함

- jQuery의 경우 DOM 구조가 변경되면(예) <h1>이 <p>로 변경된 경우) 자바스크립트 로직도 변경되야함

  : 기존의 웹은 자바스크립트 DOM API를 사용하여 DOM을 직접 조작하는 방식으로, 뷰가 변경되면 로직도 변경해야하는 문제가 있음

- Angular는 DOM에 직접 접근하지 않고 템플릿과 컴포넌트 클래스의 상호 관계를 선언하는 방식(선언형)으로 관리(data binding)

  : 템플릿에서 직접 컴포넌트 클래스의 프로퍼티를 참조하기 때문에, DOM구조를 파악할 필요가 없음(예)<h1>이<p>로 변경되어도 컴포넌트 클래스는 변경이 필요 없음) 

 

모델이 변화된 경우

1. DOM event(click, key press, mouse move, ...)

2. Timer 함수(setTimeout, setInterval)의 tick 이벤트

3. Ajax 통신/ Promise

 

7가지 데이터 바인딩(단방향: One-way data binding, 양방향: Two-way data binding)

1. 인터폴레이션(컴포넌트 클래스 -> 탬플릿)

       {{ expression }}

2. 프로퍼티 바인딩(컴포넌트 클래스 -> 탬플릿)

       [property]=”expression”

3. 어트리뷰트 바인딩(컴포넌트 클래스 -> 탬플릿)

       [attr.attribute-name]=”expression”

4. 클래스 바인딩(컴포넌트 클래스 -> 탬플릿)

       [class.class-name]=”expression”

5. 스타일 바인딩(컴포넌트 클래스 -> 탬플릿)

       [style.style-name]=”expression”

6. 이벤트 바인딩(컴포넌트 클래스 <- 탬플릿)

       (event)=”statement”

7. 양방향 데이터 바인딩(컴포넌트 클래스 <-> 탬플릿)

       [(ngModel)]=”property”