Angular12 기초개념 데이터 바인딩

 

정의

---

 

 

구조화 되어있는 웹 애플리케이션은 뷰와 모델의 분리가 되어있으면서 또한 유기적인 동작을 해야한다. 굉장히 모순되어있는 말인데 이 모순을 극복하게 해주는것이 데이터 바인딩이다.

 

컴퓨터 프로그래밍에서 데이터 바인딩은 제공자와 소비자로부터 데이터 원본을 결합시켜 이것들을 동기화하는 기법이다. -wikipedia-

 

• Angular에서 데이터 바인딩은 템플릿(VIEW)과 컴포넌트의 클래스 데이터(Model)를 하나로 묶어서 유기적으로 동작하게 만든다.

 

• 기존의 웹 애플리케이션에서는 자바스크립트 DOM API를 사용해서 DOM에 직접 접근하는 방식을사용했는데(ex. jQery에서는 h1태그에 접근하기위해 $('h1'). 이런형식을사용) 이러한 방식은 View와 Model사이의 관계를 분리하기 어려워 뷰가 바뀌면 로직도 대부분 바꾸어야한다.('h1'에서 'p'로 바뀐다면 $('h1).으로 되어있는 모든 로직을 $('p').로 바꿔야한다.

 

• 이를 극복하기 위해서 Angular가 선택한 방법은 템플릿과 컴포넌트 클래스의 상호 관계를 선언하는 방식을 채택하여 관계를 관리하였는데
  ( 컴포넌트 클래스안에서 count 변수 선언하면 HTML에서 {{ count }}하면 데이터가 온다) 이때 사용되는 데이터 바인딩은 클래스의 프로퍼티를 템플릿에서 직접 참조하여 DOM에 접근하고 조작하는 코드를 작성할 필요가 없다.
• 예시) 

  

• 

 

 

위 개념이 JS공부도 제대로 안하고 Jquery만 죽어라 사용했던 나에게는 이해하는데 시간이 조금 걸렸는데 DOM의 트리구조에 대해서 조금이나마 이해하고 나서 보니 정말 신선했다 항상 class의 자식의 자식 li의 형제들을 찾아가며 하나하나 접근하고 만들지 않아도되는 id를 만들었다가 한번 고치면 그것을 찾는 데에서 시간을 엄청나게 잡았는데 이러한 구조는 재미있었고 이외에도 많은 바인딩 형식을 제공하여 그것에 대하여도 적어보고싶다.

 

 

JS에서는 OnClick, Jquery에서는 $('').click() 그럼 Angular에서는? 와같은 다양한 데이터 바인딩에대한 의문이 들었고 Angular는 DOM조작 방식보다 간편하게 데이터를 가져와서 View에 표현해 줄수 있는데 7가지 정도가 지원된다고 한다(Angular click이벤트는 사실 아직도 차이를 많이 느끼지는 못했다)

 

 

 

종류

---

 

    1.  인터폴레이션

인터폴레이션(Interpolation):  템플릿 문법(<HTML에서 사용되는>)중에 단방향 데이터 바인딩에서 사용되는데 
{{}} 이 표현식의 평가된 결과에대해 문자열로 변환하며 표현해준다!

사용예시)
<p> 시간 : {{ time }} </p>

    2.  프로퍼티 바인딩

프로퍼티 바인딩(Property binding): 단방향 데이터 바인딩을 표현식의 평가된 결과에따라서 HTML요소의 DOM 프로퍼티에
바인딩된다.

사용예시)
<p [innerHTML]="time"></p>

export class AppComponent {
	time ='시간'
}

    3.  어트리뷰트 바인딩

어트리뷰트 바인딩(attribute binding): 단방향 데이터 바인딩을 표현식의 평가된 결과에따라서 
HTML요소의 DOM 어트리뷰트에 바인딩된다.

사용예시)
<element [attr.attribute-name]="expression">...</element>

• 이 부분이 차이점을 이해하기 너무 힘든데 어트리뷰트와 프로퍼티의 차이점을 먼저 이해해야한다. 엄연히 서로 다른것이기 때문이다.
• 예를 들어서 , <div class="ex"></div> 라는 마크업 태그에서 ex라는 class속성을 가진 div에서 div는 엘리먼트(element,요소)이고 class는 어트리뷰트(attribute,속성)가 되며 ex는 클래스어티리뷰트의 값(value)이 된다.
• 프로퍼티(property)는 여기에서 HTML DOM안에서의 attribute를 가리키는 표현이다. 만약 위의 예시에서 div을 노드 객체로 뽑아낸다면 아래와 같은 형태로 참고하면된다.

  

  • 즉 조금 더 단순하게 접근하면 Attribute는 HTML elements에 추가적인 정보를 넣을때 사용되는 요소이고 Property는 html DOM tree 안에서 attribute를 가르키는 요소이다. (조금더 깊은 부분은 추후 정리예정)

  // 프로퍼티 바인딩
  document.getElementById('test').value = 'testvalue';
  
  // 어트리뷰트 바인딩
  document.getElementById('test').setAttribute('value', 'testvalue');
  
  <!-- 프로퍼티 바인딩의 변환 결과 -->
  <input id="test" type="text">
  <!-- 어트리뷰트 바인딩의 변환 결과 -->
  <input id="test" type="text" value="testvalue">​

   
• 
  
  

     4.  클래스바인딩

클래스바인딩(Class binding): HTML element의 Attribute에 Class를 추가하거나 삭제 할 수 있다.

사용예시)
<!-- 조건의 의한 클래스 바인딩
         우변의 표현식이 true이면 클래스를 추가한다 -->
    <div [class.text-large]="isLarge">text-large</div>
    <!-- 조건의 의한 클래스 바인딩
         우변의 표현식이 false이면 클래스를 삭제한다 -->
    <div class="text-small color-red" [class.color-red]="isRed">text-small</div>
    <!-- 여러 개의 클래스를 한번에 지정할 수 있다 -->
    <div [class]="myClasses">text-large color-red</div>
    <!-- 클래스 바인딩은 기존 클래스 어트리뷰트보다 우선한다.
         따라서 기존 클래스 어트리뷰트는 클래스 바인딩에 의해 reset된다.
         클래스 바인딩의 위치는 관계없다. -->
    <div class="text-small color-blue" [class]="myClasses">text-large color-red</div>

• 보통 클래스 바인딩은 주로 하나의 클래스에 조건을 붙여 추가하거나 삭제하는 용도로 사용한다.

 

 

     5.  스타일 바인딩

스타일 바인딩(Style binding): HTML요소의 style attrubute에 스타일을 지정할 수 있다.

사용예시)

<div [style.background-color]="'skyblue'"></div>

• style 바인딩은 기존에 있던 style 어트리뷰트 보다 우선된다.
• 스타일 바인딩은 주로 하나의 인라인 스타일을 조건에 의해 추가하는 용도로 사용한다. 여러 개의 인라인 스타일을 추가할 때는 ngStyle 디렉티브를 사용한다.

 

 

     6.  이벤트 바인딩

이벤트 바인딩(Event binding): View에서(HTML) 특정 이벤트가 발생하면 핸들러를 호출하는 것을 말한다.

사용예시)
<button (click)="onClick()">버튼</button>

export class AppComponent{
	onClick(){
		alert("이벤트발생")
	}
}

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

 

     7.  양방향 데이터 바인딩

양방향 데이터 바인딩(Two-Way data binding): View와 Component 클래스의 상태변화를 둘다 
반영하는 것을 말한다.

사용예시)
<div [(ngModel)]="property">예시</div>

• ngModel디렉티브를 사용하기위해서는 Module에 FormModule을 임포트해야한다.