연습 - 할 일 목록 만들기 - Training

10분

이 연습에서는 지금까지 배운 모든 것을 활용하여 Blazor 앱에 기본 할 일 목록 페이지를 추가합니다.

할 일 목록 페이지 만들기

새 Blazor 웹앱 프로젝트를 만듭니다.
구성 요소/Pages 폴더에 Todo.razor 파일 추가

Visual Studio와 Visual Studio Code에서 솔루션 탐색기에 있는 구성 요소/페이지 폴더를 마우스 오른쪽 단추로 클릭하고 새 파일 추가에 해당하는 옵션을 선택하여 Razor 파일을 추가할 수 있습니다.

.NET CLI에서 다음 명령을 사용하여 Razor 파일을 만들 수도 있습니다.
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
이전 명령의 -n|--name 옵션은 새 Razor 구성 요소의 이름을 지정합니다. 새 구성 요소는 -o|--output 옵션을 사용하여 프로젝트의 Components/Pages 폴더에 만들어집니다.

Important

Razor 구성 요소 파일 이름은 다른 HTML 요소와 쉽게 구별할 수 있도록 첫 번째 문자가 대문자여야 합니다.
Todo 구성 요소를 열고 상대 URL이 /todo인 파일 맨 위에 @page Razor 지시문을 추가하고, 구성 요소가 UI 이벤트를 처리할 수 있도록 렌더링 모드를 InteractiveServer(으)로 설정합니다.
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
앱에 변경 내용을 적용하고 "/todo"로 이동하여 새 페이지를 확인합니다.

새 할 일 목록 페이지는 아직 다른 기존 페이지가 있는 탐색 메뉴에 표시되지 않습니다. 탐색 메뉴는 앱 레이아웃의 일부인 NavMenu 구성 요소에서 정의됩니다. NavMenu 구성 요소를 업데이트하여 할 일 목록 페이지에 대한 링크를 추가해 보겠습니다.

Components/Layout/NavMenu.razor를 엽니다.
NavMenu 구성 요소에서 nav 요소를 찾고 날씨 페이지의 기존 탐색 항목 아래에 다음 div 요소를 추가합니다.
```
<div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Todo
    </NavLink>
</div>
```
NavLink 구성 요소는 앵커 태그를 렌더링하는 기본 제공 Blazor 구성 요소입니다. 현재 브라우저 주소가 NavLink의 href과(와) 일치하는 경우 링크 스타일을 지정하는 데 사용할 수 있는 active CSS 클래스도 렌더링합니다.

이 변경 내용을 적용한 후에는 이제 탐색 메뉴에 할 일 페이지가 표시되는 것을 볼 수 있습니다.

할 일 항목 목록 작성

프로젝트의 루트(Program.cs과(와) 동일한 수준)에 새 TodoItem.cs 파일을 만들고 다음 C# 클래스를 추가합니다.
```
public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}
```
Todo.razor에서 @code 블록에 할 일 항목 목록 필드를 추가합니다.
```
@code {
    private List<TodoItem> todos = new();
}
```
foreach 루프를 사용하여 정렬되지 않은 모든 할 일 목록을 렌더링합니다.
```
<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>
```
목록이 비어 있으므로 아직 할 일 목록에 대한 렌더링 결과가 보이지 않습니다. 할 일 항목을 추가하는 방법이 필요합니다.

할 일 항목 추가

할 일 항목을 목록에 추가하기 위한 몇 가지 UI 요소를 추가해 보겠습니다.

Todo.razor에서 정렬되지 않은 목록 아래에 input 태그와 button을(를) 추가합니다.
```
<input />
<button>Add todo</button>
```

newTodo 문자열 필드를 만들고 @bind 지시문 특성을 사용하여 input에 바인딩합니다.

<input @bind="newTodo" />
<button>Add todo</button>

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

newTodo 값에 따라 todos 목록에 새 TodoItem을(를) 추가한 다음 newTodo 값을 빈 문자열로 다시 설정하는 @onclick 처리기를 button에 추가합니다.

<input @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    string newTodo = "";

    void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

이제 할 일 항목을 추가할 수 있고 목록에 표시되는지 확인합니다. 또한 input 값은 각 할 일 항목을 추가한 후 다시 설정해야 합니다.

완료 표시란 추가 및 남은 할 일 항목 수 계산

끝낸 할 일 항목을 완료로 표시하고, 기존 할 일 항목을 편집하고, 남은 할 일 항목 수를 계산하는 방법이 필요합니다.

li 요소의 내용을 업데이트하여 todo.IsDone에 바인딩된 checkbox 형식의 input과(와) todo.Title에 바인딩된 텍스트 input을(를) 렌더링합니다.

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<h3> 헤더를 업데이트하여 완료되지 않은(IsDone이 false) todo 항목의 수를 표시합니다.
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```
앱에 변경 내용을 적용한 후 항목을 추가하고, 편집하고, 완료로 표시하면서 구성 요소를 테스트해 봅니다.

이제 Blazor 할 일 목록이 ✅에서 완료되었습니다.

계속

연습 - 할 일 목록 만들기

할 일 목록 페이지 만들기

탐색 메뉴에 할 일 페이지 추가

할 일 항목 목록 작성

할 일 항목 추가

완료 표시란 추가 및 남은 할 일 항목 수 계산

피드백