[Blazor] 삼항 연산자를 이용한 Class CSS 속성

개요

• Blazor 에서 삼항 연산자를 이용하여 Class CSS 속성을 변경하는 방법에 대해서 알아봅니다.

Class 속성에서 삼항 연산자 사용이 필요한 경우

• Blazor 에서 ToDoList 를 개발하던 중, Check 값에 따라서 Text Color 값을 변경해야 할 일이 있었습니다.
• Check 가 되어 있으면 검은색의 Text, Check 가 해제되어 있으면 회색의 Text 로 변경되도록 개발해야 하는 경우가 있었는데, 이럴 때 Class 속성에서 삼항 연산자를 통해 2개의 CSS 속성 값을 적용해 줄 수 있습니다.
• 예제 코드를 통해서 어떻게 사용하는지 보여드리겠습니다.

TodoListComponent.razor

• TodoListComponent.razor 컴포넌트는 ToDoList 의 데이터를 표시해주는 컴포넌트 입니다.
• 여기서 체크박스 컴포넌트가 체크 되어 있으면, content-check-item CSS 속성을 그리고 체크가 되어 있지 않으면 content-not-check-item CSS 속성을 사용해야 한다고 가정합니다.
• 그럼 다음과 같이 코드를 작성하면 됩니다.

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

• 위 코드에서 핵심은 <div class="@(todo.IsDone == true ? "content-check-item" : "content-not-check-item")">@todo.Title</div> 부분입니다.
• 즉, IsDone 의 값에 따라서 content-check-item 혹은 content-not-check-item CSS 속성을 사용합니다.
• 이렇게 Blazor 에서 삼항 연산자를 이용하여 Class 속성을 적용하는 방법에 대해서 정리해 보았습니다.