[iOS][SwiftUI] Todo 만들기

안녕하세요 오늘은 Todo를 만들어보도록 하겠습니다.

 

1.데이터 모델 만들기

Todo 항목을 저장하기 위한 데이터 모델을 만들어야합니다. 이 예제에서는 간단한 Todo 항목을 나타내는 TodoItem 구조체를 만들겠습니다.

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var completed: Bool
}

2. 사용자 인터페이스 만들기

Todo 항목을 표시하기 위해 SwiftUI의 List 뷰 요소를 사용할 수 있습니다. 또한 Toggle 뷰 요소를 사용하여 각 Todo 항목의 완료 여부를 표시할 수 있습니다.

struct TodoListView: View {
    @State var todoItems: [TodoItem] = [
        TodoItem(title: "Buy groceries", completed: false),
        TodoItem(title: "Do laundry", completed: true),
        TodoItem(title: "Walk the dog", completed: false)
    ]
    
    var body: some View {
        List(todoItems) { item in
            HStack {
                Toggle("", isOn: $todoItems[index].completed)
                Text(item.title)
            }
        }
    }
}

3.사용자 입력 처리 및 리스트 업데이트

새 Todo 항목을 추가하기 위해 사용자가 입력한 텍스트를 저장하는 @State 변수와 TextField 뷰 요소를 추가할 수 있습니다. 그리고 Button 뷰 요소를 추가하여 새로운 항목을 Todo 리스트에 추가할 수 있습니다.

 

struct TodoListView: View {
    @State var todoItems: [TodoItem] = [
        TodoItem(title: "Buy groceries", completed: false),
        TodoItem(title: "Do laundry", completed: true),
        TodoItem(title: "Walk the dog", completed: false)
    ]
    @State var newTodoItemTitle = ""
    
    var body: some View {
        VStack {
            HStack {
                TextField("New item", text: $newTodoItemTitle)
                Button(action: {
                    let newItem = TodoItem(title: newTodoItemTitle, completed: false)
                    todoItems.append(newItem)
                    newTodoItemTitle = ""
                }) {
                    Text("Add")
                }
            }
            List(todoItems) { item in
                HStack {
                    Toggle("", isOn: $todoItems[index].completed)
                    Text(item.title)
                }
            }
        }
    }
}

감사합니다.