[Blazor] MouseOver, MouseOut 이벤트 적용하기

개요

• Blazor 에서 MouseOver, MouseOut 이벤트를 적용하는 방법에 대해서 정리 진행합니다.

MouseOver, MouseOut 이벤트 사용이 필요한 부분

• MouseOver, MouseOut 이벤트 사용이 필요한 부분은 개발을 진행하다 보면 많이 있습니다.
• 저 같은 경우는 TodoList 를 만들면서, List 항목에 Mouse 를 올려두면 삭제(휴지통) 이미지가 뜨고, 다시 리스트 항목을 벗어나면 삭제(휴지통) 이미지가 사라지도록 하기 위해서 MouseOver, MouseOut 이벤트를 사용하였습니다.
• 그럼 Blazor 에서 실제로 어떻게 MouseOver, MouseOut 이벤트를 선언하여 사용하는지 예제 코드를 통해 알아보도록 하겠습니다.

TodoListComponent.razor

@using ToDoList.Data

<div>
    <ul>
        @foreach (var todo in todos!)
        {
            <li>
                <div class="continer" @onmouseover="(() => MouseOver.InvokeAsync(todo.Id))"
                                      @onmouseout="(() => MouseOut.InvokeAsync(todo.Id))">
                    <input class="check-button checkbox-item"
                    type="checkbox"
                    checked="@todo.IsDone"
                    onchange="@(()=>{ CheckedClick.InvokeAsync((todo.Id, true));})" />
                    <div class="@(todo.IsDone == true ? "content-check-item" : "content-not-check-item")">@todo.Title</div>
                    <input
                        type="button"
                        hidden="@todo.IsDisabled"
                        class="img-button"
                        @onclick="(() => DeleteOnClick.InvokeAsync(todo.Id))"></input>
                </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; }
    [Parameter]
    public EventCallback<int> MouseOver { get; set; }
    [Parameter]
    public EventCallback<int> MouseOut { get; set; }
}

• 위 코드에서 핵심은 @onmouseover="(() => MouseOver.InvokeAsync(todo.Id))", @onmouseout="(() => MouseOut.InvokeAsync(todo.Id))" 부분입니다.
• 현재 div 태그에 MouseOver, MouseOut 2개의 마우스 관련 이벤트를 선언하였습니다.
• 또한, @code 영역에서 EventCallback 을 이용하여 MouseOver, MouseOut 2개의 이벤트 콜백 함수를 선언하여 @onmouseover, @onmouseout 속성에 맞게 Invoke 해 주었습니다.
• 이제 자식 컴포넌트에서 MouseOver, MouseOut 관련 이벤트 콜백을 정의 하였으니, 실제 부모 컴포넌트에서 각각의 마우스 관련 이벤트 핸들러를 작성해 주면 됩니다.

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 void DeleteData(int id)
    {
        todos.Remove(todos.Find(t => t.Id == id)!);
    }

    protected void MouseOver(int id)
    {
        var todo = todos.Find(t => t.Id == id);
        todo.IsDisabled = false;
    }

    protected void MouseOut(int id)
    {
        var todo = todos.Find(t => t.Id == id);
        todo.IsDisabled = true;
    }
}

• 위 코드는 부모 컴포는트의 코드 내용입니다.
• 앞서 자식 컴포넌트로 생성하였던 TodoListComponent 태그를 선언하였고, 속성으로 MouseOver, MouseOut 2개의 속성을 추가한 것을 확인할 수 있습니다.
• 또한 @code 영역에서 MouseOver, MouseOut 되었을 때의 이벤트 핸들러를 각각 정의해 주었습니다.
• 위와 같이 부모-자식 컴포넌트 간의 Mouse 관련 이벤트를 정의 및 핸들링 할 수 있습니다.