- Blazor의 단방향 데이터 바인딩
- Blazor의 양방향 데이터 바인딩
Blazor의 단방향 데이터 바인딩
Binding to a property
다음 예제에서는 구성 요소 클래스에서 구성 요소 뷰로의 단방향 데이터 바인딩이 있습니다. 뷰는 구성 요소 클래스의 Name 속성에 바인딩됩니다. Name 속성 값이 변경될 때마다 UI가 자동으로 업데이트되어 변경 사항을 반영합니다.
Component class
protected string Name { get; set; } = "Tom";
Component view
<b>Name :</b> @Name
Binding to razor expression
다음 예에서는 성별에 따라 인사와 함께 직원 이름을 표시합니다.
Component class
protected string Name { get; set; } = "Tom";
protected string Gender { get; set; } = "Male";
Component view
<b>Name with salutation:</b> @(Gender == "Male" ? $"Mr. {Name}" : $"Miss. {Name}")
Binding to input element
다음 예제에서 html input element(텍스트 상자)는 Name property 에 바인딩됩니다. 이것은 여전히 구성 요소 클래스에서 뷰로 바인딩하는 한 가지 방법입니다. 클래스의 Name 속성 값이 변경될 때마다 UI가 자동으로 업데이트되어 변경 사항을 반영합니다. 그러나 텍스트 상자의 값을 변경해도 구성 요소 클래스의 이름 속성은 변경되지 않습니다. 데이터는 한 방향(예: 구성 요소 클래스에서 UI로)으로만 흐르고 다른 방향(즉, UI에서 클래스로)으로는 흐르지 않습니다.
이 예제에서는 input element에 바인딩합니다. 비슷한 방식으로 라디오 버튼, 체크박스 등과 같은 모든 HTML 요소에 바인딩할 수 있습니다.
Component class
protected string Name { get; set; } = "Tom";
Component view
<b>Name :</b> <input value="@Name" />
Blazor의 양방향 데이터 바인딩
- 양방향 데이터 바인딩을 사용하면 데이터가 구성 요소 클래스에서 UI로, UI에서 구성 요소 클래스로 양방향으로 이동합니다.
- 다음은 Blazor에서 양방향 데이터 바인딩을 구현하는 한 가지 방법입니다. value 특성은 Name 속성 에 바인딩되므로 데이터는 구성 요소 클래스에서 UI로 흐릅니다.
- 우리는 또한 onchange 이벤트에 구속력이 있습니다. onchange 특성 값은 이름 속성을 텍스트 상자의 값으로 업데이트하는 람다 식입니다 . 따라서 이 이벤트 바인딩을 사용하면 데이터가 UI에서 구성 요소 클래스 속성으로 흐릅니다.
- 참고: 여기서는 람다 식을 사용하고 있지만 구성 요소 클래스에서 별도의 명명된 메서드를 만든 다음 해당 메서드의 이름을 onchange 이벤트 의 값으로 지정할 수도 있습니다 .
Component class
protected string Name { get; set; } = "Tom";
Component view
<b>Name :</b> <input value="@Name" @onchange="@(e => { Name = e.Value.ToString(); })" />
양방향 데이터 바인딩을 더 쉽게 만들기
위에서 언급한 바인딩은 아래와 같이 다시 작성할 수 있습니다 .
이는 양방향 데이터 바인딩을 단순화합니다.
Component class
protected string Name { get; set; } = "Tom";
Component view
<b>Name :</b> <input @bind="Name" />
변경 이벤트는 입력 요소가 포커스 를 잃고 구성 요소 클래스의 속성이 입력 요소의 데이터로 업데이트되는 경우에만 트리거됩니다.
양방향 데이터 바인딩이 있는 이벤트 매개변수
- 입력 요소가 포커스를 잃을 때까지 기다리지 않으려면 어떻게 해야 합니까? 입력 요소의 값이 변경됨에 따라 구성 요소 클래스 속성이 업데이트되기를 원합니다.
- 이는 양방향 데이터 바인딩에서 이벤트 이름을 지정하여 처리할 수 있습니다. 이벤트 이름을 지정하기 위해 아래 예와 같이 이벤트 매개변수를 사용합니다. 이 경우 입력 이벤트에 바인딩합니다 . 이것은 값이 변경될 때 발생합니다.
<b>Name :</b> <input @bind="Name" @bind:event="oninput" />
값 속성이 아닌 요소 속성에 바인딩
@bind-{ATTRIBUTE} :event 구문 과 함께 @bind-{ATTRIBUTE}를 사용하여 값 특성 이외의 요소 특성을 바인딩할 수 있습니다. 아래 예에서 <div> 요소 스타일은 Color 속성 값이 변경될 때 업데이트됩니다 .
Component class
protected string BColor { get; set; } = "background-color:white";
Component view
<b>Colour :</b> <input @bind="BColor" />
<div @bind-style="BColor" @bind-style:event="onchange">
<h3>The background color of this text changes</h3>
</div>