.NET 개발자에 대한 Angular 데이터 바인딩 간소화

.NET 개발자에 대한 Angular 데이터 바인딩 간소화

Angular 데이터 바인딩을 처리하는 것은 시간이 많이 걸리고 때로는 너무 복잡할 수도 있습니다. 이 블로그 게시물은 프로세스를 효과적으로 단순화하는 방법을 보여줍니다.

6min read

직장에서 Angular 배우고자 하는 많은 .NET 개발자와 이야기할 기회가 있습니다. 종종 나는 그들이 .NET 기술을 가져와 Angular 학습에서 이를 매핑하기 위해 작업하는 것을 보았습니다. 배우려는 노력과 추진력은 있지만 .NET은 그렇지 Angular.

Angular는 순수한 JavaScript 라이브러리이므로 이 게시물 시리즈에서는 .NET 개발자를 위한 기본적이지만 중요한 Angular 개념을 단순화하겠습니다.

이 기사에서는 Angular의 데이터 바인딩에 대해 알아봅니다. 다행히 Angular의 데이터 바인딩은 .NET보다 훨씬 간단합니다.

먼저 .NET의 몇 가지 데이터 바인딩 기술을 수정해 보겠습니다. 예를 들어 ASP.NET MVC 에서는 모델을 사용하여 데이터 바인딩을 수행합니다. 뷰가 바인딩되었습니다.

  1. 객체로
  2. 복잡한 개체로
  3. 개체 컬렉션으로

기본적으로 ASP.NET MVC 에서는 모델 클래스에 데이터 바인딩을 수행합니다. 반면에 WPF에서는 데이터 바인딩 모드를 사용할 수 있습니다. 다음과 같이 XAML에서 데이터 바인딩 모드를 설정할 수 있습니다.

  1. One-way data binding
  2. Two-way data binding
  3. 일회성 데이터 바인딩
  4. One-way to source data binding

MVVM 패턴을 따르는 경우 INotifyPropertyChanged 인터페이스를 사용하여 양방향 데이터 바인딩을 달성 할 수 있습니다. 따라서 .NET 세계에서 데이터 바인딩을 달성하는 방법에는 여러 가지가 있습니다.

그러나 Angular의 데이터 바인딩은 훨씬 더 간단합니다.

Angular 매우 새로운 경우 구성 요소를 소개하겠습니다. Angular 응용 프로그램에서는 브라우저(또는 다른 곳)에 표시되는 것이 구성 요소입니다. 구성 요소는 다음과 같은 부분으로 구성됩니다.

  1. A TypeScript class called Component class
  2. 구성 요소의 Template이라는 HTML 파일
  3. 구성 요소 스타일 지정을 위한 선택적 CSS 파일
구성 요소는 다음과 같은 부분으로 구성됩니다

Angular에서 데이터 바인딩은 구성 요소 클래스와 구성 요소 템플릿 사이에서 데이터가 어떻게 흐를지 결정합니다.

Angular는 세 가지 유형의 데이터 바인딩을 제공합니다. 그것들은 다음과 같습니다:

  1. 보간
  2. 속성 바인딩
  3. 이벤트 바인딩
Angular는 세 가지 유형의 데이터 바인딩을 제공합니다. 그것들은 다음과 같습니다

하나씩 살펴 보겠습니다.

보간

Angular 보간은 단방향 데이터 바인딩입니다. 구성 요소 클래스에서 템플릿으로 데이터를 전달하는 데 사용됩니다. 보간 구문은 {{propertyname}}입니다.

아래와 같이 구성 요소 클래스가 있다고 가정해 보겠습니다.

export class AppComponent {
 
      product = {
          title: 'Cricket Bat',
          price: 500
      };
 
  }

구성 요소 클래스에서 템플릿으로 제품을 전달해야 합니다. 예제를 간단하게 유지하기 위해 product 객체의 값을 하드 코딩하고 있지만 실제 시나리오에서는 API를 사용하여 데이터베이스에서 데이터를 가져올 수 있습니다.  아래 목록과 같이 보간을 사용하여 product 개체의 값을 표시할 수 있습니다.

<h1>Product</h1>
<h2>Title : {{product.title}}</h2>
<h2>Price : {{product.price}}</h2>

보간을 사용하면 데이터가 구성 요소 클래스에서 템플릿으로 전달됩니다. 이상적으로는 제품 개체의 값이 변경될 때마다 템플릿이 제품 개체의 업데이트된 값으로 업데이트됩니다.

Angular 에는 ChangeDetector Service라는 것이 있는데, 이는 구성 요소 클래스와 템플릿의 속성 값이 서로 동기화되어 있는지 확인합니다.

따라서 Angular에 데이터를 표시하려면 보간 데이터 바인딩을 사용해야 합니다.

속성 바인딩

Angular는 "속성 바인딩"이라는 두 번째 유형의 바인딩을 제공합니다. 속성 바인딩의 구문은 대괄호 []입니다. 구성 요소 클래스의 속성으로 템플릿의 HTML 요소의 속성을 설정할 수 있습니다. 

따라서 아래와 같은 구성 요소 클래스가 있다고 가정 해 보겠습니다.

export class AppComponent {
   btnHeight = 100;
   btnWidth = 100;
}

이제 템플릿에 있는 버튼의 height 및 width 속성을 property binding을 사용하여 component 클래스의 속성으로 설정할 수 있습니다.

<button 
  [style.height.px] = 'btnHeight'
  [style.width.px] = 'btnWidth' >
        Add Product
</button >

Angular Property Binding은 구성 요소 클래스의 속성으로 HTML 요소의 속성을 설정하는 데 사용됩니다. 이미지, 목록, 표 등과 같은 다른 HTML 요소의 속성을 설정할 수도 있습니다.  구성 요소 클래스의 속성 값이 변경될 때마다 HTML 요소 속성이 속성 바인딩에서 업데이트됩니다.

이벤트 바인딩

Angular는 구성 요소 클래스의 템플릿에서 발생한 이벤트를 캡처하기 위한 세 번째 유형의 바인딩을 제공합니다. 예를 들어, 컴포넌트 템플릿에 버튼이 있고 버튼을 클릭하면 컴포넌트 클래스에서 함수를 호출하려고 합니다. 이벤트 바인딩을 사용하여 이 작업을 수행할 수 있습니다. 이벤트 바인딩의 기본 구문은 (eventname)입니다.

이 예제에는 다음과 같은 구성 요소 클래스가 있을 수 있습니다.

export class AppComponent {
     addProduct() {
         console.log('add product');
     }
 }

템플릿의 버튼을 클릭할 때 addProduct 함수를 호출하려고 합니다. 이벤트 바인딩을 사용하여 이 작업을 수행할 수 있습니다.

<h1>Product</h1>
<button (click)='addProduct()'>
    Add Product
</button>

ngZone의 일부인 HTML 요소의 모든 이벤트와 이벤트 바인딩 Angular 수행할 수 있습니다. 여기에서 자세한 내용을 확인할 수 있습니다.

Angular 에서는 이러한 세 가지 바인딩을 제공합니다. 이벤트 바인딩에서는 데이터가 템플릿에서 클래스로 흐르고, 속성 바인딩 및 보간에서는 데이터가 클래스에서 템플릿으로 흐릅니다.

Property Binding 및 Interpolation에서 데이터는 클래스에서 템플릿으로 흐릅니다

양방향 데이터 바인딩

Angular 에는 양방향 데이터 바인딩이 내장되어 있지 않지만 속성 바인딩과 이벤트 바인딩을 결합하면 양방향 데이터 바인딩을 구현할 수 있습니다.

양방향 데이터 바인딩

Angular는 양방향 데이터 바인딩을 달성하기 위해 ngModel 지시문을 제공하며 사용하기가 매우 쉽습니다. 먼저 FormsModule을 가져온 다음 양방향 데이터 바인딩을 만들 수 있습니다.

export class AppComponent {
     name = 'foo';
 }

양방향 데이터는 name 속성을 입력 상자와 바인딩할 수 있습니다.

<input type="text" [(ngModel)]='name' />

<h2>{{name}}</h2>

보시다시피 [(ngModel)]을 사용하여 입력 컨트롤과 이름 속성 사이에 양방향 데이터 바인딩을 만듭니다. 사용자가 입력 상자의 값을 변경할 때마다 name 속성이 업데이트되고 그 반대의 경우도 마찬가지입니다.

.NET 개발자는 이제 Angular의 데이터 바인딩이 훨씬 더 간단하며 네 가지 구문만 알면 된다는 것을 깨달았을 것입니다. 이 게시물이 유용하기를 바라며 향후 게시물에서 Angular의 다른 주제를 다룰 것입니다.

 이 게시물이 마음에 들면 공유해주세요. 또한Infragistics Ignite UI for Angular Components를 체크아웃하지 않았다면 체크아웃하십시오! 웹 앱을 더 빠르게 코딩하는 데 도움이 되는 30+ 재료 기반 Angular 구성 요소가 있습니다.

Angular
데모 요청