[Blazor] One-way binding, Two-way binding

One-way binding (일반적인 단방향 바인딩)

<div>
  CurrentValue in TestComponent is @CurrentValue
</div>

@code {
  public int CurrentValue { get; set; }
}

 

Two-way binding (표준 양방향 바인딩)

입력 요소(Age)가 Lost Focus 되거나,  Enter 키를 누를 때까지 Age가 변경되지 않는 것을 확인할 수 있습니다.

<label>Age = @Age</label>
<input @bind-value=Age/>

 

Input의 감지
@bind-value:event="oninput" 구문은 변경 감지를 사용하도록 할 때 사용합니다.

Blazor에게 valueHTML 속성을 inputName 멤버 ( @bind-value=Name)에 바인딩을 하고, Blazor에게 oninputHTML 요소의 이벤트에 연결하여 요소 값이 변경될 때마다 바인딩이 즉시 발생하도록 합니다( @bind-value:event="oninput").

<label>Name = @Name</label>
<input @bind-value=Name @bind-value:event="oninput"/>

 

참고로, @bind-value:event에 사용되는 javascript 함수에는, 포커를 잃거나 Enter를 입력할때만 발생하는 onchange와 사용자가 입력값을 변경할때마다 멤버가 즉시 업데이트되는 oninput이 있습니다.