Blazor Server Data Binding
One-way Binding 및 Two-way Binding 단계별 따라하기
Blazor Server에서 데이터 바인딩은 컴포넌트와 사용자 인터페이스 간의 데이터 흐름을 관리하는 핵심 기술입니다. 이 가이드에서는 Blazor의 One-way Binding과 Two-way Binding을 단계별로 알아보고, 이를 실습해보겠습니다.
1단계: 새로운 Blazor Server 프로젝트 만들기
- Visual Studio에서 새로운 Blazor Server 프로젝트를 생성합니다.
- 프로젝트 이름은
Hawaso로 설정하고, 프로젝트 유형을 Blazor Server App으로 선택하세요.
2단계: One-way Binding 이해하기
One-way Binding은 데이터가 모델에서 뷰로 흐르지만, 뷰에서 모델로는 흐르지 않는 방식입니다. 먼저, One-way Binding의 기본 개념을 이해하기 위해 간단한 예제를 만들어봅시다.
2.1. 데이터 모델 생성
Data 폴더에 Person.cs 파일을 생성하고 다음 코드를 추가합니다:
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
2.2. One-way Binding 컴포넌트 생성
Components/Demos/DataBindingDemo 폴더에 OneWayBinding.razor 파일을 추가하고 다음 코드를 작성합니다:
@page "/one-way-binding"
@code {
private Person person = new Person { Name = "John Doe", Age = 30 };
}
<h3>One-way Binding Example</h3>
<p>Name: @person.Name</p>
<p>Age: @person.Age</p>
3단계: Two-way Binding 이해하기
Two-way Binding은 데이터가 모델과 뷰 사이에서 양방향으로 흐르는 방식입니다. 즉, 뷰에서 모델로의 데이터 변경이 가능하며, 그 반대도 가능합니다.
3.1. Two-way Binding 컴포넌트 생성
Components/Demos/DataBindingDemo 폴더에 TwoWayBinding.razor 파일을 추가하고 다음 코드를 작성합니다:
@page "/two-way-binding"
@code {
private Person person = new Person { Name = "Jane Doe", Age = 25 };
}
<h3>Two-way Binding Example</h3>
<label>Name: <input @bind="person.Name" /></label>
<label>Age: <input @bind="person.Age" type="number" /></label>
<p>Updated Name: @person.Name</p>
<p>Updated Age: @person.Age</p>
4단계: bind-value와 bind-value:event 사용하기
Blazor의 @bind 구문은 단순화된 형태의 양방향 바인딩입니다. 그러나 더 많은 제어가 필요할 때 bind-value와 bind-value:event를 사용할 수 있습니다.
4.1. bind-value와 bind-value:event의 기본 사용법
Components/Demos/DataBindingDemo 폴더에 BindValueExample.razor 파일을 추가하고 다음 코드를 작성합니다:
@page "/bind-value-example"
@code {
private string currentValue = "Initial Value";
private void OnInput(ChangeEventArgs e)
{
currentValue = e.Value.ToString();
}
}
<h3>bind-value and bind-value:event Example</h3>
<input bind-value="currentValue" bind-value:event="oninput" />
<p>Current Value: @currentValue</p>
위 코드는 oninput 이벤트가 발생할 때마다 입력 값을 currentValue에 바인딩합니다.
5단계: 실습을 통해 데이터 바인딩 이해하기
5.1. One-way Binding 실습
OneWayBinding.razor 컴포넌트를 실행하여 다음과 같은 결과를 확인합니다:
Name: John Doe
Age: 30
이 예제에서는 모델의 데이터가 뷰로만 전달되며, 사용자가 이를 변경할 수 없습니다.
5.2. Two-way Binding 실습
TwoWayBinding.razor 컴포넌트를 실행하여 다음과 같은 결과를 확인합니다:
Name: [Jane Doe]
Age: [25]
Updated Name: Jane Doe
Updated Age: 25
이 예제에서는 입력 필드를 통해 사용자가 데이터를 변경할 수 있으며, 변경된 데이터는 모델에 반영됩니다.
5.3. bind-value와 bind-value:event 실습
BindValueExample.razor 컴포넌트를 실행하여 다음과 같은 결과를 확인합니다:
Current Value: Initial Value
입력 필드에 값을 입력하면 currentValue가 즉시 업데이트됩니다.
마무리
Blazor Server에서 One-way Binding과 Two-way Binding은 데이터와 사용자 인터페이스 간의 상호작용을 효율적으로 관리하는 데 중요한 역할을 합니다. 이 가이드를 통해 기본적인 데이터 바인딩 개념을 이해하고, 다양한 실습을 통해 이를 실제 프로젝트에 적용해보세요.