Blog

EventCallBack 을 사용하여 자식 구성 요소에서 부모 구성 요소로 통신하는 방법에 대해 설명합니다 .

이 페이지에는 2개의 blazor Component가 있습니다.

1. EmployeeList Component(상위 Component)
2. DisplayEmployee Component (하위 Component)

이전 포스팅에서는 매개변수를 사용하여 부모 Component에서 자식 Component로 데이터를 전달하는 방법에 대해 설명했습니다. 
이번에는 반대로 하위 Component에서 상위 Component로 데이터를 전달하는 방법에 대해 설명합니다. 

자식에서 부모 component 로의 통신

• 체크박스를 선택하여 직원을 선택하면 Selected Employees Count 를 표시하고자 합니다 . 
• Checkbox 는 자식 component (DisplayEmployee 구성 요소)에 있습니다.
• 선택한 직원 수는 상위 component  (EmployeeList 구성 요소)에 표시되어야 합니다.
• 하위 component 에서 Checkbox 의 선택된 상태가 변경되면 선택한 직원 수가 상위 구성 요소에서 그에 따라 업데이트되어야 합니다. 즉, 자식 구성 요소 이벤트에 대한 응답으로 부모 구성 요소 메서드를 호출하려고 합니다.

EventCallback을 사용하여 이벤트 노출

자식 Component 에서 Checkbox의 선택된 상태가 변경되면 부모 Component 에 알려야 합니다. 이를 위해 하위 Component 는 이벤트를 노출합니다. 부모 Component 는 자식 구성 요소의 이벤트에 콜백 메서드를 할당합니다. Blazor에서는 이벤트를 노출하기 위해 EventCallback 을 사용합니다 .

자식 Component 클래스 (DisplayEmployeeBase.cs)

• OnEmployeeSelection 은 이 자식 Component 가 노출하는 이벤트입니다. EventCallback 유형입니다 .
• EventCallback은 이벤트 데이터(일반적으로 이벤트 페이로드라고도 함)를 전달하는 데 사용하는 제네릭을 지원합니다.
• 이 예에서는 bool 을 전달합니다 . CheckBox의 선택 여부에 따라 true 또는 false 값입니다.
• CheckBox는 IsSelected bool 속성 에 바인딩됩니다 .
• CheckBoxChanged 메서드는 이벤트 처리기입니다. 체크박스의 체크 상태를 IsSelected 속성에 저장합니다. 또한 OnEmployeeSelection 사용자 지정 이벤트를 발생시킵니다. 
• 체크박스 체크 상태는 OnEmployeeSelection 이벤트에 이벤트 페이로드로 전달됩니다 .

public class DisplayEmployeeBase : ComponentBase
{
    protected bool IsSelected { get; set; }

    [Parameter]
    public EventCallback<bool> OnEmployeeSelection { get; set; }

    protected async Task CheckBoxChanged(ChangeEventArgs e)
    {
        IsSelected = (bool)e.Value;
        await OnEmployeeSelection.InvokeAsync(IsSelected);
    }
}

Child Component View (DisplayEmployee.razor)

보기에서 확인란은 IsSelected 속성 에 바인딩되고 CheckBoxChanged()는 onchange 이벤트 에 대한 이벤트 핸들러로 지정됩니다 . 확인란의 선택된 상태가 변경될 때마다 변경 이벤트가 발생한다는 것을 기억하십시오 .

<input type="checkbox" checked="@IsSelected" @onchange="CheckBoxChanged" />

부모 구성 Component Class (EmployeeListBase.cs)

• SelectedEmployeesCount 속성은 선택된 직원 수를 추적합니다. 자식 컴포넌트에서 체크박스의 체크 상태에 따라 증가 또는 감소하는 속성입니다.
• EmployeeSelectionChanged 는 콜백 메서드입니다. 이 메서드는 자식 구성 요소의 확인란이 선택된 상태가 변경될 때 호출됩니다.

public class EmployeeListBase : ComponentBase
{
    protected int SelectedEmployeesCount { get; set; } = 0;

    protected void EmployeeSelectionChanged(bool isSelected)
    {
        if(isSelected)
        {
            SelectedEmployeesCount++;
        }
        else
        {
            SelectedEmployeesCount--;
        }
    }
}

Parent Component View (EmployeeList.razor)

보기에서 EmployeeSelectionChanged를 자식 구성 요소 사용자 지정 이벤트 OnEmployeeSelection 에 대한 콜백 메서드로 할당합니다 .

@foreach (var employee in Employees)
{
    <DisplayEmployee OnEmployeeSelection="EmployeeSelectionChanged">
    </DisplayEmployee>
}