Parameter, Ref, EventCallback

컴포넌트화

Blazor에서는 페이지를 구성할 때 여러 Razor 컴포넌트를 활용하여 모듈화된 구조를 갖출 수 있습니다. 이러한 컴포넌트화는 코드의 재사용성과 유지 보수성을 향상시키는 데 크게 기여합니다. 예를 들어, User.razor 파일에서 <ul>...</ul> 부분을 별도의 컴포넌트로 분리하여 재사용할 수 있습니다.

User.razor:

@page "/user"
@using BlazorApp.Data

<h3>Online Users</h3>

<ShowUser Users="_users"></ShowUser>

<br />

<!-- 유저 추가 -->
<div class="container">
    <div class="row">
        <div class="col">
            <input class="form-control" placeholder="Add User" @bind-value="_inputName" />
        </div>
        <div class="col">
            <button class="@_btnClass" type="button" @onclick="AddUser" disabled="@(_users.Count() >= 5)">Add a User</button>
        </div>
    </div>
</div>

@code {
    List<UserData> _users = new List<UserData>();
    string _inputName;
    string _btnClass = "btn btn-primary";

    protected override void OnInitialized()
    {
        _users.Add(new UserData() { Name = "Shung" });
        _users.Add(new UserData() { Name = "Kong" });
        _users.Add(new UserData() { Name = "Hi" });
        RefreshButton();
    }

    void AddUser()
    {
        _users.Add(new UserData() { Name = _inputName });
        _inputName = string.Empty;
        RefreshButton();
    }

    void RefreshButton()
    {
        _btnClass = (_users.Count % 2 == 0) ? "btn btn-primary" : "btn btn-secondary";
    }
}



ShowUser.razor:

@using BlazorApp.Data
@code {
    [Parameter]
    public List<UserData> Users { get; set; }
}



위와 같이 User.razor에서 <ShowUser Users="_users"></ShowUser>를 통해 _users 리스트를 ShowUser 컴포넌트로 전달하고 있습니다. 이때, ShowUser 컴포넌트는 [Parameter] 특성을 사용하여 Users 프로퍼티를 정의하고 있습니다. citeturn0search0

Parameter

[Parameter] 특성은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 위 예시에서 User.razor의 _users 리스트를 ShowUser.razor로 전달하기 위해 [Parameter]를 사용하였습니다. 이렇게 하면 ShowUser 컴포넌트 내에서 Users 프로퍼티를 통해 유저 리스트에 접근할 수 있습니다. citeturn0search0

Ref

@ref 특성은 부모 컴포넌트에서 자식 컴포넌트의 메서드나 프로퍼티에 직접 접근할 수 있도록 참조를 설정하는 데 사용됩니다. 예를 들어, User.razor에서 ShowUser 컴포넌트의 AddUser 메서드를 호출하려면 다음과 같이 설정할 수 있습니다.

User.razor:

<ShowUser Users="_users" @ref="_showUser"></ShowUser>

@code {
    ShowUser _showUser;

    void AddUser()
    {
        _showUser.AddUser(new UserData() { Name = _inputName });
        _inputName = string.Empty;
    }
}



이렇게 하면 User.razor에서 ShowUser 컴포넌트의 AddUser 메서드를 호출하여 유저를 추가할 수 있습니다. citeturn0search0

EventCallback

EventCallback은 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달할 때 사용됩니다. 예를 들어, ShowUser 컴포넌트에서 유저를 삭제한 후 부모 컴포넌트에 알리기 위해 EventCallback을 사용할 수 있습니다.

ShowUser.razor:

@using BlazorApp.Data
@code {
    [Parameter]
    public List<UserData> Users { get; set; }
    [Parameter]
    public EventCallback CallbackTest { get; set; }

    public void KickUser(UserData user)
    {
        Users.Remove(user);
        CallbackTest.InvokeAsync(null);
    }
}



User.razor:

<ShowUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>

@code {
    void CallbackTestFunc()
    {
        _inputName = "Callback Test";
    }
}



이렇게 설정하면 ShowUser 컴포넌트에서 KickUser 메서드 호출 시 CallbackTest를 통해 부모 컴포넌트의 CallbackTestFunc 메서드를 실행하게 됩니다. 이때, EventCallback을 사용하면 StateHasChanged()를 호출하지 않아도 자동으로 UI가 갱신됩니다.