[Angular] Data Binding (데이터 바인딩)

데이터 바인딩이란?

• 필요한 이유?
  • 구조화된 웹앱은 뷰, 모델의 분리가 필요, 하지만 뷰와 모델은 유기적으로 동작이 필요
  • 위 문제를 해결하기 위해 데이터 바인딩이 필요
• 데이터 바인딩은 뷰와 모델을 하나로 연결
• 템플릿 = View, 데이터 = Model
• 뷰와 컴포넌트 클래스의 데이터를 하나로 묶어 유기적 동작
• 기존 jQuery를 사용
  • 뷰와 모델 간의 관계를 느슨하게 결합하기 어려운 구
  • 구조 상 문제로 뷰가 변경되면 로직도 변경될 가능성이 매우 높음
• Angular는 DOM에 직접 적느하지 않고, 템플릿과 컴포넌트 클래스의 상호 관계를 선언 (Declarative programming)으로 뷰와 모델 관계를 관리
• 컴포넌트 클래스와 템플릿 문법으로 기술
  • {{title}}
  • 결과적으로 템플릿이 변경되어도 컴포넌트 클래스를 변경할 필요가 없음

변화 감지 (Change detection)

• 모델의 동기화를 유지하기 위해 변화를 감지, 이를 반영
• 데이터 바인딩은 변화감지 매커니즘의 토대 위에서 수행
• AngularJS는 양방향 바인딩(Two-way binding), ng-click과 같은 이벤트만을 사용하는 등 제약 있었음
• Angluar는 양방향 바인딩과 단방향 바인딩(one-way binding)을 모두 지원(zone.js 라이브러리 사용: 네이티브 DOM 이벤트를 사용하여 변화 감지가 수행되도록 개선)
• 뷰 변화 감지는 DOM 이벤트를 캐치, 하지만 모델은 HTML의 요소가 아니므로 이벤트 발생하지 않음
  • 위 이유로 별도의 감지를 위해 조치가 필요 (비동기식 처리 수행될 때 컴포넌트 클래스의 데이터 변경)
  • DOM 이벤트 - click, key press, mouse move 등
    • 예) 클릭 이벤트 핸들러에 의해 컴포넌트 클래스의 name property의 값을 변경
  • Timer(setTimeout, setInterval)의 tick 이벤트
  • Ajax 통신 / Promise
  • 모델이 변경된다는 것은 컴포넌트 클래스의 프로퍼티 값이 변경되는 것을 의미

데이터 바인딩

• Angular는 단방향, 양방향 데이터 바인딩을 지원, 기존 웹 프로그래밍에서 사용하는 DOM 조작 방식보다 간편하게 데이터를 가져와서 뷰 표현

• 바인뎅 제공 7가지

  • 단방향
  • 인터폴레이션
    • {{expression}}
  • 프로퍼티 바인딩
    • [property]="expression"
  • 어트리뷰트 바인딩
    • [attr.attribute-name]="expression"
  • 클래스 바인딩
    • [class.class-name]="expression"
    • HTML 클래스 어트리뷰트에 클래스를 추가,삭제 가능
  • 스타일 바인딩
    • [style.style-name]="expression"
  • 이벤트 바인딩
    • (event)="statement"
    • 뷰의 상태 변화(버튼 클릭, 체크박스 체크, input에 텍스트 입력 등)에 의해 이벤트가 발생하면 이벤트 핸들러를 호출
  • 양방향 데이터 바인딩
  • [(ngModel)]="variable"

• [참고]

  • http://poiemaweb.com/angular-component-data-binding