Angular에서 단방향 데이터 바인딩이란 무엇입니까?
Angular의 단방향 데이터 바인딩(즉, 단방향 바인딩)은 컴포넌트에서 뷰(DOM)로 데이터를 바인딩하거나 그 반대로 뷰에서 컴포넌트로 데이터를 바인딩하는 방법입니다. 이는 기본 데이터가 변경될 때마다 자동으로 동기화되는 정보를 최종 사용자에게 표시하는 데 사용됩니다. 이는 WPF의 단방향 바인딩과 유사합니다.
Angular 데이터 바인딩이란 무엇인가요?
데이터 바인딩은 프로그래머가 널리 사용하는 서비스 유형으로, 이러한 유형의 서비스는 모든 UI 업데이트 프로세스를 상당히 간소화하고 앱을 빌드할 때 보일러플레이트의 양을 줄여줍니다. Angular의 데이터 바인딩은 매우 쉽고 WPF와 달리 데이터 컨텍스트, 뷰 모델 또는 INotifyPropertyChanged
(INPC)에 대해 걱정할 필요가 없습니다. 걱정해야 할 것은 HTML 파일과 타입스크립트 파일뿐입니다. 모든 데이터 바인딩에서 가장 먼저 필요한 것은 바인딩할 속성입니다. 따라서 구성 요소 클래스에 text
라는 속성을 추가하고 값을 설정해 보겠습니다. WPF에서는 DataContext를 설정하고 XAML에서 속성을 바인딩해야 합니다.
public class IgniteUIClass
{
public string Text { get; set; }
public IgniteUIClass()
{
this.Text = "IgniteUI for Angular";
}
}
...
public MainWindow()
{
InitializeComponent();
this.DataContext = new IgniteUIClass();
}
csharp
<Label Content="{Binding Path=Text, Mode=OneWay}"></Label>
xml
Angular 에서는 DOM 속성을 구성 요소의 속성에 직접 바인딩합니다.
export class SampleComponent implements OnInit {
text = 'IgniteUI for Angular';
constructor() { }
ngOnInit() {}
}
typescript
<h2>{{ text }}</h2>
html
Angular 데이터 바인딩 보간
위의 코드에서는 text
속성 값에 대한 바인딩을 사용하여 HTML에 일부 텍스트를 표시합니다. 이 경우 interpolation
사용하여 단방향 바인딩을 만듭니다. 이중 중괄호, 속성 이름(이 경우 text
) 및 두 개의 닫는 중괄호를 입력하여 이를 수행합니다. 동일한 결과를 얻는 또 다른 방법은 interpolation
구문을 다시 사용하여 h2 태그를 만들고 text
속성을 innerHTML 속성에 바인딩하는 것입니다.
<h2 innerHTML="{{ text }}"></h2>
html
interpolation
에는 두 가지 중요한 사항이 있습니다.
- 먼저 중괄호 안의 모든 내용은
string
로 렌더링됩니다. - 둘째, 중괄호 안의 모든 내용을
template expression
이라고 합니다. 이를 통해 연결과 같은 더 복잡한 작업을 수행할 수 있습니다.
예를 들어 일부 텍스트를 text
속성의 값과 연결해 보겠습니다.
<h2>{{"Welcome to " + text }}</h2>
html
템플릿 표현식을 사용하면 자바스크립트 속성 및 메서드에도 바인딩할 수 있습니다. 예를 들어 text
속성의 길이를 바인딩하여 숫자 20을 생성할 수 있습니다.
<h2>{{ text.length }}</h2>
html
또한 해당 속성의 메서드(예: toUpperCase()
에 바인딩할 수도 있습니다.
<h2>{{ text.toUpperCase() }}</h2>
html
이는 WPF의 데이터 바인딩보다 훨씬 강력하고 사용하기도 훨씬 쉽습니다. 템플릿 표현식 내에서 수학적 계산을 수행할 수도 있습니다. 예를 들어, 간단히 2 + 2를 표현식에 넣으면 4와 같은 결과가 표시됩니다.
<h2>{{ 2 + 2 }}</h2>
html
우리가 할 수 있는 또 하나의 일은 typescript 파일에서 실제 메소드에 바인딩하는 것입니다. 이를 달성하는 방법에 대한 간단한 예는 다음과 같습니다.
<h2>{{ getTitle() }}</h2>
html
이 getTitle()
은 TypeScript 파일에 정의된 메서드입니다. 페이지의 결과는 해당 메소드의 반환 값입니다.
getTitle() {
return 'Simple Title';
}
typescript
interpolation
매우 강력해 보이지만 제한이 있습니다. 예를 들어 문자열만 나타냅니다. 이제 구성 요소 클래스에 간단한 부울 속성을 만들어 보겠습니다.
export class SampleComponent implements OnInit {
text = 'IgniteUI for Angular';
isDisabled = false;
constructor() { }
...
typescript
이제 텍스트 유형의 간단한 input
만들고 isDisabled
속성을 입력의 disabled
속성에 바인딩하겠습니다.
<input type="text" disabled="{{ isDisabled }}">
html
예상한 결과는 input
활성화되어야 하지만 비활성화된다는 것입니다. 이는 interpolation
문자열을 반환하지만 입력의 disabled 속성이 부울 유형이고 부울 값이 필요하기 때문입니다. 이것이 올바르게 작동하도록 하기 위해 Angular property binding
제공합니다.
Angular 속성 바인딩
Angular의 속성 바인딩은 HTML 요소 또는 지시문의 대상 속성 값을 바인딩하는 데 사용됩니다. 여기의 구문은 보간 구문과 약간 다릅니다. 속성 바인딩을 사용하면 속성 이름이 대괄호로 묶이고 해당 값에는 중괄호가 포함되지 않으며 바인딩된 속성의 이름만 포함됩니다.
<input type="text" [disabled]="isDisabled">
html
속성 바인딩을 사용하면 입력의 disabled
속성이 문자열이 아닌 부울 결과에 바인딩됩니다. isDisabled
값은 false이며 앱을 실행하면 입력이 활성화된 것으로 표시됩니다.
바인딩이 데이터 유형 결과에 의존하는 경우 property binding
사용해야 한다는 점을 기억하는 것이 매우 중요합니다! 바인딩이 단순히 문자열 값에 의존하는 경우 interpolation
사용해야 합니다.