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 사용해야 합니다.

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.