[Blazor] EventCallBack 을 이용한 부모-자식 Component 값 전달하는 방법

개요

• EventCallBack 메서드를 이용하여 부모, 자식 간의 Component 값을 전달할 수 있습니다.
• 어떻게 전달하는지 예제를 통해 내용 정리 진행합니다.

시나리오

• ToDoList 를 만든다고 가정합니다.
• input, button 태그를 통해 input 에 텍스트를 입력 후, button 을 클릭 할 때 해당 내용을 추가한다고 가정을 하고 기능을 만든다고 가정합니다.
• 여기서 InputComponent.razor, Todo.razor 2개의 컴포넌트를 만드는데 부모 컴포넌트는 Todo.razor 이고 자식 컴포넌트는 InputComponent.razor 입니다.
  • Todo.razor - 부모
  • InputComponent.razor - 자식

InputComponent.razor

• InputComponent.razor 컴포넌트를 생성 후, 다음 코드를 추가합니다.

<div>
    <input placeholder="Something todo" @bind-value="newTodo" />
    <button @onclick="(() => OnClick.InvokeAsync(newTodo))">Add todo</button>
</div>

@code {
    [Parameter]
    public string? newTodo { get; set; }
    [Parameter]
    public EventCallback<string> OnClick { get; set; }
}

• 위 코드에서 핵심은 @code 쪽 내용입니다.
• [Parameter] Attribute 가 붙은 속성들은 props 입니다.
• 즉, 부모로부터 값을 전달 받아서 자식으로 값을 전달해 주는 속성입니다.
• 여기서 EventCallback<T> 라고 하여 OnClick 이벤트 콜백이 보입니다.
• 해당 콜백의 역할은 부모로부터 Click 이벤트 핸들러를 콜백으로 전달하여 이벤트를 발생시키는 역할을 해줍니다.
• 여기서 EventCallback<string> 이라고 했기에, 매개변수로 string 변수가 전달되는 것을 확인할 수 있습니다.

<button @onclick="(() => OnClick.InvokeAsync(newTodo))">Add todo</button>

• 그럼 실제로 부모 컴포넌트인 Todo.razor 에서 어떻게 자식 컴포넌트인 InputComponent.razor 를 선언하고 이벤트를 선언하는지 코드를 작성해 보겠습니다.

Todo.razor

@page "/todo"

@using ToDoList.Component
@using ToDoList.Data

<PageTitle>Todo</PageTitle>

<InputComponent
    newTodo="@newTodo"
    OnClick="AddTodo">
</InputComponent>


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

    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;
        }
    }
}

• <InputComponent></InputComponent> 와 같이 앞서 자식으로 만들었던 InputComponent.razor 컴포넌트를 선언해 주었습니다.
• 그리고 newTodo="@newTodo", OnClick="AddTodo" 와 같이 변수와 이벤트를 바인딩해주었습니다.
• 앞서 EventCallback<string> 으로 생성하였던 OnClick 이벤트 콜백 함수를 AddTodo 이벤트 핸들러에 연결해 주었습니다.
• 즉, button 컴포넌트의 click 이벤트가 발생하게 되면 AddTodo 이벤트 핸들러가 실행되는 구조 입니다.
• 이렇게 EventCallback 을 이용하여 부모-자식 간의 이벤트를 전달해 줄 수 있습니다.