To Do List (2)

1. Lv 2. Todo 추가 및 완료기능 구현하기

추가기능 구현

우선 추가기능을 구현하려면 Alert를 만들어야 한다.

블로그를 참고하여 만들었다.

struct MainView: View {
    @State private var showing = false
    @State private var title = ""
    
    var body: some View {
        NavigationStack{
            VStack {
                List {
                    Text("test")
                    Text("test1")
                    Text("test2")
                }
            }
            .toolbar {
                ToolbarItem(id: "add",
                            placement: .navigationBarTrailing) {
                    Button("add",
                           systemImage: "plus.app") {
                        showing.toggle()
                    }
                           .alert("TodoList 추가",
                                  isPresented: $showing) {
                               TextField("TodoList 추가", text: $title)
                               Button("OK",
                                      role: .cancel) {
                                   addList()
                               }
                               Button("Cancel", role: .destructive){
                                   
                               }
                           }
                }
            }
        }
    }
    
    func addList() {
        print(title)
    }    
}

여기서 포인트는 alert역시도 modifier의 형태로 구현을 한다는 것이다.

이때 한가지 눈여겨 볼 점은 isPresented 일반 변수가 들어가는게 아닌 바인딩으로 해줘야한다.

바인딩

SwiftUI에서 바인딩(Binding)은 뷰와 상태 간의 양방향 연결을 의미한다. 상태(State)가 변하면 뷰가 자동으로 업데이트되고, 뷰에서의 사용자 인터랙션에 따라 상태도 업데이트된다. 즉, 바인딩을 통해 상태와 UI 요소가 동기화되는 것이다. @State로 선언한 showing 변수를 $showing으로 바인딩하여 alert의 표시 여부를 제어하고 있다. 이처럼 alert이 표시될 때, showing 값이 true가 되고, 그에 따라 뷰가 반응하여 경고창을 나타내는 방식이다.

그리고 alert안에 다가 TextField, Button을 넣어주어 Alert를 구성해주었다.

현재는 테스트용으로 ok를 눌렀을때 Console에 해당 값을 print하게 해두었다.

Cell View 디자인

struct CellView: View {
    @State var isOn: Bool = false
    
    var body: some View {
        HStack {
            Text("Hello, World!")
                .padding(.leading, 30)
            Toggle("", isOn: $isOn)
                .padding(.trailing, 30)
            
            if isOn {
                
            } else {
                
            }
            
        }
    }
}

일단은 대충 이렇게 해두었다.

SwiftData 사용하여 추가 구현

@Environment(\.modelContext) private var modelContext modelContext를 만들어 준다.

이녀석은 CoreData를 사용했을때 Context와 비슷한 역할을 수행한다고 생각하면 된다. CRUD를 담당한다.

그리고 함수를 수정한다.

func addList() {
        let todoModel = TodoModel(id: id + 1, title: title, isCompleted: false)
        modelContext.insert(todoModel)
    }

List 수정

@Query private var todoLists: [TodoModel]

VStack {
                List(todoLists, id: \.self) { list in
                    Text(list.title)
                }
            }

배열에 있는걸 가져와서 사용하게 된다.

id: \.self는 SwiftUI에서 각 항목의 고유성을 결정할 때 사용된다.

\.self는 Swift의 키 경로 문법으로, 해당 항목 자체를 고유 식별자로 사용하겠다는 의미이다. 즉, todoLists 배열의 각 항목이 고유해야 하며, SwiftUI가 항목을 구분할 때 그 자체를 고유 ID로 삼아 내부적으로 비교하고 관리하게 된다.

이를 사용하면 목록에서 항목을 삽입, 삭제 또는 업데이트할 때 SwiftUI가 정확하게 각 항목을 추적할 수 있다. 다만, 배열의 각 요소가 고유해야 하며, 그렇지 않으면 문제가 발생할 수 있다.