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

2021. 4. 29. 17:53 JavaScript FrontEnd/Angular

 

데이터 바인딩이란?

  • 필요한 이유?
    • 구조화된 웹앱은 뷰, 모델의 분리가 필요, 하지만 뷰와 모델은 유기적으로 동작이 필요
    • 위 문제를 해결하기 위해 데이터 바인딩이 필요
  • 데이터 바인딩은 뷰와 모델을 하나로 연결
  • 템플릿 = 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"
  • [참고]

 

출처 : ourcstory.tistory.com/436?category=630698