02_02_BlazorApp_TodoListInMemory_초간단 인-메모리 TODO 리스트 만들기

• 1/27/2022
• 2 minutes to read

@page "/TodoListInMemory"

<h3>초간단 인-메모리 TODO 리스트</h3>

<h4>할 일이 총 @todos.Count(t => !t.IsDone)개 남았습니다.</h4>

<hr />

<form @onsubmit="@Save">
    할 일 추가: <input @bind="@newTodo" />
    <input type="button" value="추가" @onclick="@Save" />
</form>

<hr />

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


@code {
    //[!] 코드 영역은 코드 숨김(Code-Behind) 클래스 파일에 작성 가능

    // 모델/뷰모델 클래스: 현재는 단순한 문자열 하나
    private string newTodo = "";

    // 할 일 목록 담을 그릇
    private IList<TodoItem> todos = new List<TodoItem>();

    // 페이지 로드
    protected override void OnInitialized()
    {
        // 초기 데이터 가져오기: 일반적으로 Database/Web API 사용
        todos.Add(new TodoItem { Id = 1, Title = "VisualAcademy에서 Blazor 공부", IsDone = true });
    }

    // 메서드: 버튼에 대한 저장 기능을 처리한다고하여 이벤트 처리기(Handler)로 표현
    protected void Save()
    {
        todos.Add(new TodoItem { Title = newTodo });
        newTodo = null;
    }
}

강의

https://youtu.be/GB1VDeE3Zvs