Blazor 할 일 목록 앱 빌드

이 자습서에서는 앱을 빌드하고 수정하기 Blazor 위한 기본적인 작업 환경을 제공합니다. 자세한 지침은 Blazor 참조 설명서를 참조 Blazor 하세요.

다음의 방법을 알아보세요.

• 할 일 목록 Blazor 앱 프로젝트 만들기
• Razor 구성 요소 수정
• 구성 요소에서 이벤트 처리 및 데이터 바인딩 사용
• Blazor 앱에서 라우팅 사용

이 자습서의 내용을 마치면 할 일 목록 앱을 실행할 수 있습니다.

필수 조건

시스템에 아직 설치되어 있지 않거나 시스템에 최신 버전이 설치되어 있지 않은 경우 .NET 을 다운로드하여 설치합니다.

Blazor 앱 만들기

Blazor Web App 명령 셸에서 새 이름을 TodoList 만듭니다.

dotnet new blazor -o TodoList

-o|--output 옵션은 프로젝트에 대한 폴더를 만듭니다. 프로젝트에 대한 폴더를 만든 경우 명령 셸이 해당 폴더에 열려 있으면 -o|--output 옵션 및 값을 생략하여 프로젝트를 만듭니다.

위의 명령은 -o|--output 옵션으로 TodoList라는 폴더를 만들어 앱을 저장합니다. TodoList 폴더는 프로젝트의 ‘루트 폴더’입니다. 다음 명령을 사용하여 디렉터리를 TodoList 폴더로 변경합니다.

cd TodoList

할 일 목록 Blazor 앱 빌드

다음 명령을 사용하여 앱에 새 TodoRazor 구성 요소를 추가합니다.

dotnet new razorcomponent -n Todo -o Components/Pages

위 명령의 -n|--name 옵션은 새 Razor 구성 요소의 이름을 지정합니다. 새 구성 요소는 -o|--output 옵션을 사용하여 프로젝트의 Components/Pages 폴더에 만들어집니다.

Important

Razor 구성 요소 파일 이름에는 첫 글자를 대문자로 사용해야 합니다. Pages 폴더를 열고 Todo 구성 요소 파일 이름이 대문자 T로 시작하는지 확인합니다. 파일 이름이 Todo.razor여야 합니다.

파일 편집기 Todo 에서 구성 요소를 열고 파일 맨 위에서 다음을 변경합니다.

• 상대 URL이 @pageRazor 인 지시문을 추가합니다 /todo.
• 정적으로 렌더링되지 않도록 페이지에서 대화형 작업을 사용하도록 설정합니다. 대화형 서버 렌더링 모드를 사용하면 구성 요소가 서버의 UI 이벤트를 처리할 수 있습니다.
• 페이지에 HTML <title> 요소를 추가할 수 있도록 구성 요소와 함께 PageTitle 페이지 제목을 추가합니다.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Todo.razor 파일을 저장합니다.

Todo 구성 요소를 탐색 모음에 추가합니다.

NavMenu 구성 요소는 앱의 레이아웃에 사용됩니다. 레이아웃은 앱의 콘텐츠 중복을 방지할 수 있는 구성 요소입니다. NavLink 구성 요소는 앱에서 구성 요소 URL을 로드할 때 앱의 UI에서 신호를 제공합니다.

NavMenu 구성 요소의 탐색 요소 콘텐츠(<nav>)에서 Todo 구성 요소에 대해 다음 <div> 요소를 추가합니다.

Components/Layout/NavMenu.razor의 경우

<div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
    </NavLink>
</div>

NavMenu.razor 파일을 저장합니다.

TodoList 폴더의 명령 셸에서 dotnet watch run 명령을 실행하여 앱을 빌드하고 실행합니다. 앱이 실행되면 앱의 탐색 모음에서 Todo 링크를 선택하여 새 Todo 페이지를 방문합니다. 그러면 /todo의 페이지가 로드됩니다.

앱에서 명령 셸을 실행 중인 상태로 둡니다. 파일이 저장될 때마다 앱이 자동으로 다시 빌드되고 브라우저의 페이지가 자동으로 다시 로드됩니다.

프로젝트 루트(TodoList 폴더)에 TodoItem.cs 파일을 추가하여 todo 항목을 나타내는 클래스를 저장합니다. TodoItem 클래스에 대해 다음 C# 코드를 사용합니다.

TodoItem.cs:

namespace BlazorSample;

public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; }
}

참고 항목

Visual Studio를 사용하여 파일 및 클래스를 TodoItem.cs 만드는 경우 다음 방법 중 하나를 사용합니다.TodoItem

• Visual Studio가 클래스에 대해 생성하는 네임스페이스를 제거합니다.
• 앞의 코드 블록에 있는 복사 단추를 사용하여 Visual Studio가 생성한 파일의 모든 콘텐츠를 바꿉니다.

Todo 구성 요소로 돌아가서 다음 작업을 수행합니다.

• @code 블록에 있는 todo 항목에 대한 필드를 추가합니다. Todo 구성 요소는 이 필드를 사용하여 할 일 목록의 상태를 유지 관리합니다.
• 순서가 지정되지 않은 목록 태그 및 foreach 루프를 추가하여 각 할 일 항목을 목록 항목(<li>)으로 렌더링합니다.

Components/Pages/Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

목록에 할 일 항목을 추가하려면 앱에 UI 요소가 필요합니다. 순서가 지정되지 않은 목록(<ul>...</ul>) 아래에 텍스트 입력(<input>)과 단추(<button>)를 추가합니다.

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

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

TodoItem.cs 파일 및 업데이트된 Todo.razor 파일을 저장합니다. 명령 셸에서는 파일이 저장될 때 앱이 자동으로 다시 빌드됩니다. 브라우저에서 페이지를 다시 로드합니다.

Add todo 단추에 이벤트 처리기가 연결되어 있지 않으므로 단추를 선택해도 아무 일도 발생하지 않습니다.

Todo 구성 요소에 AddTodo 메서드를 추가하고 @onclick 특성을 사용하여 단추에 메서드를 등록합니다. 단추가 선택되면 AddTodo C# 메서드가 호출됩니다.

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

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

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

새 todo 항목의 제목을 가져오려면 @code 블록 맨 위에 newTodo 문자열 필드를 추가합니다.

private string? newTodo;

텍스트 <input> 요소를 수정하여 newTodo를 @bind 특성과 바인딩합니다.

<input placeholder="Something todo" @bind="newTodo" />

AddTodo 메서드를 수정하여 지정한 제목으로 TodoItem을 목록에 추가합니다. newTodo를 빈 문자열로 설정하여 텍스트 입력 값을 지웁니다.

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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

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

Todo.razor 파일을 저장합니다. 앱이 명령 셸에서 자동으로 다시 빌드되고, 페이지가 브라우저에서 다시 로드됩니다.

각 할 일 항목의 제목 텍스트를 편집 가능하게 설정하고 확인란을 통해 사용자가 완료된 항목을 추적하도록 도울 수 있습니다. 각 할 일 항목의 확인란 입력을 추가하고 해당 값을 IsDone 속성에 바인딩합니다. @todo.Title을 @bind를 사용하여 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 항목의 수를 표시합니다. 다음 헤더의 Razor 식은 Blazor가 구성 요소를 다시 렌더링할 때마다 평가됩니다.

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

완료된 Todo 구성 요소:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

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

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

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

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

Todo.razor 파일을 저장합니다. 앱이 명령 셸에서 자동으로 다시 빌드되고, 페이지가 브라우저에서 다시 로드됩니다.

항목을 추가하고 항목을 편집하고 todo 항목을 완료로 표시하여 구성 요소를 테스트합니다.

완료되면 명령 셸에서 앱을 종료합니다. 많은 명령 셸에서 키보드 명령 Ctrl+C(Windows) 또는 ⌘+C(macOS)를 사용하여 앱을 중지할 수 있습니다.

Azure에 게시

Azure에 배포에 대한 자세한 내용은 빠른 시작: ASP.NET 웹앱 배포를 참조하세요.

다음 단계

이 자습서에서는 다음 작업 방법을 알아보았습니다.

• 할 일 목록 Blazor 앱 프로젝트 만들기
• Razor 구성 요소 수정
• 구성 요소에서 이벤트 처리 및 데이터 바인딩 사용
• Blazor 앱에서 라우팅 사용

ASP.NET Core Blazor용 도구에 대해 알아보기

ASP.NET Core Blazor