Simplifying Custom Two-Way Data Binding in Angular

Angular에서 양방향 데이터 바인딩을 처리하는 방법을 알고 있습니까? 이 방법 가이드는 프로세스를 단순화하는 방법을 보여줍니다. 지금 더 읽어보세요.

Dhananjay Kumar Last Updated Feb 19, 2025 7min read

Angular 에는 세 가지 유형의 데이터 바인딩이 있으며 다음과 같습니다.

보간
이벤트 바인딩
속성 바인딩

Angular 1.X 배경에서 온 경우 양방향 데이터 바인딩이 어디에 있는지 궁금할 수 있습니다. AngularJS 1.X 데모를 처음 보고 ng-model의 힘에 깜짝 놀랐던 것을 기억하십니까? 예, 당신과 마찬가지로 저도 AngularJS 1의 양방향 데이터 바인딩 기능에 깊은 인상을 받았습니다. AngularJS 1 양방향 데이터 바인딩은 아름다웠지만 다이제스트 주기와 $watch의 짐이 있었습니다.

단순화하기 위해 Angular 에는 양방향 데이터 바인딩이 내장되어 있지 않습니다. 그것은 의미하지 않습니다. 애플리케이션에는 양방향 데이터 바인딩 Angular 있을 수 없습니다. 자, 양방향 데이터 바인딩의 힘 없이는 최신 웹 애플리케이션을 만드는 것을 생각할 수 없습니다. 따라서 이 게시물에서는 Angular에서 양방향 데이터 바인딩으로 작업하는 방법을 배울 것입니다.

Two-way data binding with ngModel

Angular 양방향 데이터 바인딩을 달성하기 위한 ngModel 지시문을 제공합니다. 아래 목록과 같이 ngModel 지시문을 사용하는 것은 매우 간단하고 간단합니다.

import {Component} from '@angular/core';

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
  <div class="container">
     <input [(ngModel)]='name' />
      <br/>
      <h1>Hello {{name}}</h1>
  </div>
  `
})
export class AppComponent{


}

ngModel 지시문을 사용하려면 애플리케이션에서 FormsModule을 가져와야 합니다. 참고로 아래에는 다른 필수 모듈 외에 FormsModule을 가져오는 app.module.ts 나열되어 있습니다.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
    imports:      [ BrowserModule,FormsModule ],
    declarations: [ AppComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

위의 데모에서 입력 요소에 입력할 때 입력 값이 name 변수에 할당되고 뷰에 다시 표시됩니다. 따라서 아래 이미지와 같이 ngModel을 사용하여 양방향 데이터 바인딩을 구현하고 있습니다.

ngModel 없는 양방향 데이터 바인딩

ngModel 지시문 작동을 이해하기 위해 ngModel 지시문을 사용하지 않고 양방향 데이터 바인딩을 달성하는 방법을 살펴보겠습니다. 그러기 위해서는

입력 요소의 value 속성에 식을 바인딩하기 위한 속성 바인딩입니다. 이 데모에서는 이름 변수 표현식을 값 속성에 바인딩합니다.
입력 요소에서 입력 이벤트를 내보내는 이벤트 바인딩입니다. 예, 사용자가 입력 요소에 입력할 때마다 발생하는 입력 이벤트가 있습니다. 이벤트 바인딩을 사용하면 입력 이벤트가 표현식에 바인딩됩니다.

따라서 속성 바인딩과 이벤트 바인딩을 사용하여 아래 목록과 같이 양방향 데이터 바인딩을 달성할 수 있습니다.

import {Component} from '@angular/core';

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
  <div class="container">
     <input [value]="name" (input)="name=$event.target.value" />
      <br/>
      <h1>Hello {{name}}</h1>
  </div>
  `
})
export class AppComponent{
   name : string = "";
}

이 데모의 ngModel 지시문 데모와 마찬가지로 입력 요소에 입력할 때 입력 요소의 값이 name 변수에 할당되고 뷰에 다시 표시됩니다.

따라서 아래 이미지에 표시된 코드를 사용하여 ngModel을 사용하지 않고 양방향 데이터 바인딩을 구현하고 있습니다.

여기서 몇 가지 중요한 사항을 이해합시다.

[value]="name"은 속성 바인딩입니다. 입력 요소의 value 속성을 변수(또는 표현식) 이름으로 바인딩하고 있습니다.
(input)= "expression"은 이벤트 바인딩입니다. 입력 이벤트가 발생할 때마다 표현식이 실행됩니다.
"name=$event.target.value"는 입력한 값을 name 변수에 할당하는 표현식입니다.
Name 변수는 AppComponent 클래스 내에서 액세스할 수 있습니다.

지금까지 우리는 ngModel을 사용하고 ngModel을 사용하지 않는 양방향 데이터 바인딩을 보았습니다. ngModel 지시문은 속성 바인딩과 이벤트 바인딩의 조합일 뿐이라는 결론을 내릴 수 있습니다. 이벤트 바인딩은 작은 대괄호를 사용하여 표시되고 속성 바인딩은 대괄호 [] 대괄호를 사용하여 표시되며, ngModel 의 구문이 [(ngModel)]인 것을 발견하면 바나나를 상자에 넣는 것과 같으며 이벤트와 속성 바인딩의 조합임을 시사합니다.

Custom two-way data binding

사용자 정의 양방향 데이터 바인딩을 생성할지 아니면 ngModel 지시문에 의존할지 매우 주의해야 합니다. 항상 사용자 지정 양방향 데이터 바인딩을 만들 필요는 없습니다. 그러나 사용자 지정 양방향 데이터 바인딩을 만드는 단계를 알아두는 것이 좋습니다. 양방향 데이터 바인딩이 활성화된 customcounter 구성 요소를 만들어 보겠습니다. 다음 단계를 따르겠습니다.

Step 1

증가 및 감소할 두 개의 버튼과 메서드가 있는 구성 요소를 만듭니다.

@Component({
    moduleId: module.id,
    selector:'countercomponent',
    template:`
    <button (click)='increnent()'>Increment</button>
    {{count}}
    <button (click)='decrement()'>Decrement</button>
    `
})
export class  AppChildComponent {
   count : number = 0;      
   increment(){
       this.count = this.count+1; 
   }
   decrement(){
            this.count = this.count - 1; 
   }
}

위에서 개수를 증가 및 감소시키는 매우 간단한 구성 요소를 만들었습니다. 이제 다른 구성 요소 내에서 이 구성 요소를 사용할 수 있지만 이 구성 요소에서는 양방향 데이터 바인딩이 활성화되지 않습니다. 이를 활성화하려면 @Input 및 @Output 속성을 사용해야 합니다.

Step 2

@Input() 속성으로 getter를 만들어 보겠습니다. 이 getter는 카운트를 반환합니다. @Input() 데코레이터에 귀속되므로 이 컴포넌트의 소비자는 프로퍼티 바인딩을 사용하여 이 값을 바인딩할 수 있습니다.

@Input() 
    get counter(){
        return this.count; 
    }

Step 3

양방향 데이터 바인딩을 만들려면 EventEmitter 형식의 이벤트를 만들어야 합니다. 이 이벤트는 소비자 구성 요소로 내보낼 수 있도록 @Output() 데코레이터에 귀속됩니다. 구성 요소의 생성자에서 이벤트 객체를 만들고 있습니다.

@Output() counterChange :  EventEmitter<number>;
    constructor(){ 
        this.counterChange = new EventEmitter();        
    }

Step 4

마지막 단계로 증가 및 감소 함수는 counterChange 이벤트를 내보내야 합니다. 따라서 아래 목록과 같이 증가 및 감소 함수를 수정해야 합니다.

increment() {
    this.count=this.count+1;
    this.counterChange.emit(this.count);
}

decrement() {
    this.count=this.count - 1;
    this.counterChange.emit(this.count);
}

두 함수 모두 counterChange 이벤트를 내보냅니다. 모든 부분을 합치면 사용자 지정 양방향 데이터 바인딩이 있는 구성 요소는 아래 나열된 코드와 같습니다.

import {Component,Input,Output,EventEmitter} from '@angular/core';

@Component({
    moduleId: module.id,
    selector:'countercomponent',
    template:`
    <button (click)='increment()'>Increment</button>
    {{count}}
    <button (click)='decrement()'>Decrement</button>
    `
})
export class  AppChildComponent {
     count : number = 0;   

     @Output() counterChange :  EventEmitter<number>;
        constructor(){
            this.counterChange = new EventEmitter();      
        }
     
     @Input() 
        get counter(){
            return this.count; 
        }

        increment(){
            this.count = this.count+1; 
            this.counterChange.emit(this.count);
        }

        decrement(){
            this.count = this.count - 1; 
            this.counterChange.emit(this.count);
        }
    }

Step 5

다른 단순 구성 요소와 마찬가지로 양방향 데이터 바인딩이 있는 구성 요소는 다른 구성 요소 내에서 사용할 수 있습니다.

import {Component} from '@angular/core';

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
  <div class="container">
     <br/>
    
     <countercomponent [(counter)]="c"></countercomponent>
     <br/>
     <h2>count = {{c}}</h2> 
     
  </div>
  `
})
export class AppComponent {
    c : number = 1;  
}

카운터 속성의 값이 AppComponent 내에서 설정되는 방식을 알 수 있는 주요 사항입니다. ngModel 지시문과 마찬가지로 counter 속성도 상자 구문 [(counter)] 의 바나나를 사용하여 설정됩니다.

결론

Angular의 양방향 데이터 바인딩은 이벤트 및 속성 바인딩에서 지원됩니다. 내장된 양방향 데이터 바인딩이 없습니다. ngModel 지시문을 사용하여 양방향 데이터 바인딩을 사용할 수 있습니다. 또한 필요한 경우 사용자 지정 양방향 데이터 바인딩을 만들 수 있습니다. 사용자 지정 양방향 데이터 바인딩은 양식 컨트롤에서 유용합니다.

이 게시물에서는 ngModel과 사용자 지정 양방향 데이터 바인딩 생성에 대해 배웠습니다. 이 게시물이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다.

Angular