parameter, ref, eventcallback

BlazorApp/BlazorApp/Pages/ShowUser.razor

@@ -0,0 +1,45 @@
+@using BlazorApp.Data;
+
+<p>
+    Users: <b>@this.Users.Count</b>
+</p>
+
+<br />
+
+<ul class="list-group">
+    @foreach (UserData user in this.Users)
+    {
+        <li @key="user" class="list-group-item">
+            <button class="btn btn-link" type="button" @onclick="(() => KickUser(user))">[Kick]</button>
+            <label>@user.Name</label>
+        </li>
+    }
+</ul>
+
+@code {
+    [Parameter]
+    public List<UserData> Users { get; set; }
+
+    [Parameter]
+    public EventCallback Callback { get; set; }
+
+    protected override void OnInitialized()
+    {
+        this.Users.Add(new UserData() { Name = "Simpson" });
+        this.Users.Add(new UserData() { Name = "Richard" });
+        this.Users.Add(new UserData() { Name = "Tylor" });
+    }
+
+    public void AddUser(UserData user)
+    {
+        this.Users.Add(user);
+    }
+
+    public void KickUser(UserData user)
+    {
+        this.Users.Remove(user);
+
+        if (this.Callback.HasDelegate)
+            this.Callback.InvokeAsync();
+    }
+}

BlazorApp/BlazorApp/Pages/User.razor

@@ -4,21 +4,7 @@
 
 <h3>Online Users</h3>
 
-<p>
+<ShowUser @ref="_showUser" Users="_users" Callback="CallbackAction"/>
-    Users: <b>@_users.Count</b>
-</p>
-
-<br />
-
-<ul class="list-group">
-    @foreach (UserData user in _users)
-    {
-        <li @key="user" class="list-group-item">
-            <button class="btn btn-link" type="button" @onclick="(() => KickUser(user))">[Kick]</button>
-            <label>@user.Name</label>
-        </li>
-    }
-</ul>
 
 <br />
 
@@ -30,49 +16,33 @@
         <div class="col">
             @* 속성(Attribute)도 binding 가능 *@
             @* conditional atribute 속성 자체에도 조건 붙일 수 있음 *@
-            <button class=@_btnClass type="button" @onclick="AddUser" disabled="@(_users.Count >= 5)">Add a user</button>
+            <button class="btn btn-primary" type="button" @onclick="AddUser" disabled="@(_users.Count >= 5)">Add a user</button>
         </div>
     </div>
 </div>
 
 @code {
     private List<UserData> _users = new List<UserData>();
+    private ShowUser _showUser;
 
     private string _inputName;
-    private string _btnClass = "btn btn-primary";
-
-    protected override void OnInitialized()
-    {
-        _users.Add(new UserData() { Name = "Simpson" });
-        _users.Add(new UserData() { Name = "Richard" });
-        _users.Add(new UserData() { Name = "Tylor" });
-
-        RefreshButton();
-    }
 
     private void AddUser()
     {
         if (string.IsNullOrEmpty(_inputName))
             return;
 
-        _users.Add(new UserData() { Name = _inputName });
+        _showUser.AddUser(new UserData() { Name = _inputName });
         _inputName = "";
-
-        RefreshButton();
     }
 
     private void KickUser(UserData user)
     {
-        _users.Remove(user);
+        _showUser.KickUser(user);
-
-        RefreshButton();
     }
 
-    private void RefreshButton()
+    private void CallbackAction()
     {
-        if (_users.Count % 2 == 0)
+        _inputName = "Callback Action Called!";
-            _btnClass = "btn btn-primary";
-        else
-            _btnClass = "btn btn-secondary";
     }
 }