[Blazor] 매개변수 여러개인 경우 EventCallBack 을 이용한 부모-자식 Component 값 전달하는 방법

개요

• EventCallBack 메서드를 이용하여 부모, 자식 간의 Component 값을 전달할 수 있습니다.
• 만약, EventCallBack 메서드를 통해 전달해야 하는 타입이 여러개인 경우 어떤 방식으로 전달하는지 예제를 통해 내용 정리 진행합니다.

시나리오

• ToDoList 를 만든다고 가정합니다.
• ToDoList 에서 List 항목을 입력하여 작성을 할 때, CheckBox 가 있습니다.
• 만약, CheckBox 의 onchange 이벤트에 2개 이상의 매개변수를 넘겨주어야 한다고 가정을 하고 어떤 식으로 N개 이상의 매개변수를 전달하는지 예제 코드를 작성합니다.

TodoListComponent.razor

• TodoListComponent.razor 컴포넌트는 List 항목을 보여주는 자식 컴포넌트 입니다.

@using ToDoList.Data

<div>
    <ul>
        @foreach (var todo in todos!)
        {
            <li>
                <div class="continer">
                    <input class="check-button checkbox-item"
                    type="checkbox"
                    checked="@todo.IsDone"
                    onchange="@(()=>{ CheckedClick.InvokeAsync((todo.Id, true));})" />
                    <div>@todo.Title</div>
                    <button
                        type="button"
                        hidden="@todo.IsDisabled"
                        class="btn btn-danger delete"
                        @onclick="(() => DeleteOnClick.InvokeAsync(todo.Id))">X</button>
                </div>
            </li>
        }
    </ul>
</div>

@code {
    [Parameter]
    public List<TodoItem>? todos { get; set; }
    [Parameter]
    public EventCallback<int> DeleteOnClick { get; set; }
    [Parameter]
    public EventCallback<(int, bool)> CheckedClick { set;get; }
}

• 위에서 핵심 코드는 public EventCallback<(int, bool)> CheckedClick { set;get; } 속성 입니다.
• CheckedClick 콜백 함수는 Tuple 형태로 (int, bool) 2개의 타입을 전달 받습니다.
• 그리고 input 태그에서 onchange="@(()=>{ CheckedClick.InvokeAsync((todo.Id, true));})" 위와 같이 람다 표현식을 통해 CheckedClick 콜백 함수를 선언하였습니다. 여기서 중요한 점은 CheckedClick.InvokeAsync((todo.Id, true)); 안에 Tuple 형태로 매개변수를 전달해 주는 것입니다.
• 그럼 해당 자식 컴포넌트를 선언하여 사용하는 부모 컴포넌트 Todo.razor 코드는 어떤 모습인지 작성해 보겠습니다.

Todo.razor

• 부모 컴포넌트인 Todo.razor 내용은 다음과 같습니다.

@page "/todo"

@using ToDoList.Component
@using ToDoList.Data

<PageTitle>Todo</PageTitle>

<TodoListComponent
    todos="@todos"
    CheckedClick="((int id, bool state) args) => StateChanged(args.id, args.state)"
    MouseOver="MouseOver"
    MouseOut="MouseOut"
    DeleteOnClick="DeleteData">
</TodoListComponent>


@code {
    private List<TodoItem> todos = new();
    private string? newTodo { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

    private void AddTodo(string keyword)
    {
        if (!string.IsNullOrWhiteSpace(keyword))
        {
            var newId = todos.Count > 0 ? todos.Max(t => t.Id) + 1 : 1;
            todos.Add(new TodoItem { Id = newId, Title = keyword  });
            newTodo = string.Empty;
        }
    }

    protected void DeleteData(int id)
    {
        todos.Remove(todos.Find(t => t.Id == id)!);
    }

    protected void StateChanged(int id, bool state)
    {
        var todo = todos.First(t => t.Id == id);
        todo.IsDone = !todo.IsDone;
    }
}

• 위 코드에서 <TodoListComponent></TodoListComponent> 컴포넌트를 추가하였습니다.
• 그리고 속성에서 CheckedClick="((int id, bool state) args) => StateChanged(args.id, args.state)" 와 같이 Tuple 형태의 매개변수를 StateChanged 이벤트 핸들러에 전달해 주었습니다.
• 이로 인해, 최종적으로 2개 이상의 매개변수를 StateChanged 이벤트 핸들러에게 정상적으로 전달하여 이벤트 수행을 진행할 수 있습니다.

정리

• EventCallback 메서드를 통해 여러개의 매개변수를 전달하려면 Tuple 을 이용해 전달 가능합니다.
• 만약, 다른 방법을 원하면 매개변수를 포함하는 새로운 클래스를 생성 후, 해당 클래스를 선언하여 전달해주면 됩니다.