Angular에서 양방향 데이터 바인딩이란 무엇입니까?
Angular의 양방향 데이터 바인딩은 컴포넌트에서 뷰로, 그리고 그 반대로 데이터를 흐르게 합니다. 이는 최종 사용자에게 정보를 표시하는 데 사용되며, UI를 사용하여 기본 데이터를 변경할 수 있도록 합니다. 이는 뷰(템플릿)와 이미 언급한 컴포넌트 클래스 간에 양방향 연결을 만듭니다. 이 프로세스는 WPF의 양방향 바인딩과 유사합니다.
How does data binding work in Angular?
Angular 데이터 바인딩은 데이터를 동기화하여 작동합니다. 각도 구성 요소를 UI에 추가할 수 있습니다. 이렇게 하면 항상 데이터의 현재 값을 표시할 수 있습니다. 양방향 바인딩의 경우, 모델과 뷰 간에 자동 데이터 동기화가 수행되어 항상 동기화된 상태를 유지합니다. 따라서 모델에 변경 사항이 있으면 뷰에도 즉시 반영됩니다. 그 반대의 경우도 마찬가지입니다. 뷰에서 변경된 내용은 모델에도 업데이트됩니다. Angular의 양방향 데이터 바인딩은 최종 사용자에게 정보를 표시하는 데 사용되며, 최종 사용자는 UI를 사용하여 기초 데이터를 변경할 수 있습니다. 이렇게 하면 뷰(템플릿)와 컴포넌트 클래스 간에 양방향 연결이 이루어집니다. 이는 WPF의 양방향 바인딩과 유사합니다.
단방향 바인딩은 구성 요소 클래스에서 상태를 가져와 뷰에 표시합니다. 이 코드를 살펴보겠습니다.
<input #myTitle (keyup)="keyup(myTitle.value)">
<h2>{{ text }}</h2>
export class SampleComponent implements OnInit {
text = 'default value';
keyup(value) {
this.text = value;
}
...
Here we are simply using interpolation to bind the text property to the HTML. This will display the value of the text property in the UI. The input element handles the user interaction and updates the underlying text property through the UI by using the event binding. Essentially, the input does the opposite of the one-way binding, it takes the information from the UI and updates the property in the component class. The method which is hooked up to the input's keyup event updates the text property each time the event occurs. Once the text property value is changed by the event method, that change is reflected in the UI by the one-way binding using interpolation of the h2 element. So if the user types something into the input element, that will immediately update the h2 text - this behavior is basically a simulation of a two-way binding. The same can also be achieved in WPF by using a one-way binding and a keyup event handler, but the two-way binding is way more convenient to use.
How to implement two-way data binding in Angular
다행히도 훨씬 더 쉬운 방법으로 위의 샘플 논리를 구현할 수 있으며 이것이 바로 양방향 바인딩 단계입니다!
The direction of a two-way binding is not just component class to UI, but UI to component class as well. To achieve this, we are going to use a directive called ngModel. Let's update the sample from above with the ngModel directive. The syntax for that is - an open bracket followed by an open parenthesis, and of course the corresponding closing parenthesis and bracket. This is called a banana in the box, so let's see it in action!
<input [(ngModel)]="text">
<h2>{{ text }}</h2>
WPF의 동등한 바인딩은 다음과 같습니다.
<TextBox Text="{Binding Path=Text, Mode=TwoWay}"></TextBox>
<TextBlock Text="{Binding Path=Text, Mode=OneWay}"></TextBlock>
The Angular binding is a matter of syntax, and in WPF it is more like a setup - in particular the value of Binding.Mode.
If we run this code, an error would occur in the console - saying that the ngModel is an unknown property of the input element. This is due to the fact, that in order to use the ngModel directive, it's necessary to import the FormsModule. It needs to be imported into the app.module.ts file:
import { FormsModule } from '@angular/forms';
...
@NgModule({
imports: [
BrowserModule,
FormsModule
]
...
If we run the sample, the initial input's value would be equal to default value, which is the text property's value. Since the input is editable, changing its value will reflect over the h2 element immediately. So typing into the input updates the text property, and then the h2 element displays that value via the interpolation.
이를 달성하는 또 다른 동등한 방법은 다음과 같습니다.
<input [ngModel]="text" (ngModelChange)="text = $event">
이는 실제로 속성 바인딩과 이벤트 바인딩을 사용한 첫 번째 샘플과 유사합니다.
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub