[Web] 바인딩

 

'데이터 바인딩'에 대해서 이해하고, 간단한 스크립트 예제를 정리하였습니다.

· 데이터 바인딩?

데이터 바인딩은 앱 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스입니다. 바인딩 설정이 올바르고 데이터가 적절한 알림을 제공하는 경우 데이터 값이 변경될 때 데이터에 바인딩된 요소에 변경 사항이 자동으로 반영됩니다.

 

· 단방향 바인딩

<!-- 페이지 추가 -->
@page "/binding"

<h3>Binding</h3>

<!-- 코드 내의 변수를 사용하기위해서는 @를 붙여서 사용-->
<!-- 단순히 코드에서 HTML로 들어오는 방식 ->
<p>Value : @_value</p>

@code
{
	int _value = 15; //Code 영역에 변수 선언
}

• @code에 있는 _value라는 변수를 html 코드 내에서 표현합니다.

 

Value : 15라고 나온다.

 

· 양방향 바인딩

<!-- 페이지 추가 -->
@page "/binding"

<h3>Binding</h3>

<!-- 코드 내의 변수를 사용하기위해서는 @를 붙여서 사용-->
<!-- 단순히 코드에서 HTML로 들어오는 방식 ->
<p>Value : @_value</p>

<!-- HTMP에서 코드내의 변수를 제어하는 방식  ->
<!-- https://www.w3schools.com/tags/att_input_type_range.asp ->
<input type="range" step="1" @bind-value="_value" @bind-value:event="oninput"/>

@code
{
	int _value = 15; //Code 영역에 변수 선언
}

• range UI를 사용하여 @bind-value가 _value인 값을 변경합니다.
• HTML에서 @code영역의 _value의 값을 변경합니다.

 

range의 변경에 따라 Value가 변경된다.