SwiftUi로 TODO App 만들기 (1)

coreData를 이용해서 TodoApp을 만들어보자. 우선 AddTodoView를 추가한다.

Todo의 이름과 중요도를 고르고 싶다. 따라서 @State를 이용한다.

@State는 뷰의 상태를 저장하고 관리하기 위해 사용하는 속성래퍼다. 이를 통해 뷰가 상태값의 변경에 따라 자동으로 다시 렌더링되도록 한다.

@State로 선언된 값은 해당 뷰에만 종속된다. 주로 뷰에서 간단한 상태를 관리할 때 사용된다.

	@State private var name:String = ""
    @State private var priority: String = "Normal"
    
    let priorities = ["High", "Normal", "Low"]

priorities 중에서 priority를 고를거라서 배열로 선언해준다.

이제 NavigationView를 사용할거다. SwiftUi에서 NavigationView는 뷰들을 계층적으로 구성하여 화면 간의 탐색을 가능하게 하는 컨테이너다.

NavigationView는 일반적으로 최상위 컨테이너로 사용되며, 내부에 NavigationLink를 배치하여 다른 화면으로의 이동을 설정한다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail")
                }
            }
            .navigationBarTitle("Home", displayMode: .inline)
        }
    }
}

위 코드에서 NavigationLink를 통해 DetailView로의 이동을 설정하였으며, navigationBarTitle을 사용하여 네비게이션 바의 제목을 지정했다.

여기서는 NavigationLink는 사용하지 않았다. 여기서는 VStack 안에 간단하게 Form을 넣었다.

Form{
                    // MARK: - TODO NAME
                    TextField("Todo", text: $name)
                    
                    // MARK: - TODO PRIORITY
                    Picker("Priority", selection: $priority) {
                        ForEach(priorities, id: \.self) {
                            Text($0)
                        }
                    }
                    .pickerStyle(SegmentedPickerStyle())
                } //: FORM

Form : 사용자 입력을 받기 위한 컨테이너
TextField: 사용자로부터 텍스트 입력을 받는 필드다. 여기서 입력된 값은 $name 바인딩을 통해 상태와 연결된다.

Picker : 여러 옵션 중 하나를 선택할 수 있는 선택기다. "Priority"라는 레이블을 가지며, $priority 바인딩을 통해 선택된 값이 상태와 연결된다. ForEach를 사용하여 priorities 배열의 각 요소를 Text로 표시한다.
ForEach문에서 priorities는 반복할 데이터 배열을 의미하며, $0는 반복되는 각 요소를 나타낸다. 여기서는 priorities 배열의 요소("Low", "Medium", "High")를 각각 나타낸다.

ContentView로 가서 네비게이션 뷰를 만든다.

struct ContentView: View {
    // MARK: - PROPERTIES
    
    @State private var showingAddTodoView: Bool = false
    
    // MARK: - BODY
    var body: some View {
        NavigationView {
            List(0 ..< 5) { item in Text("Hello, world!")
            } //: LIST
            .navigationBarTitle("Todo", displayMode: .inline)
            .navigationBarItems(trailing:
                Button(action: {
                self.showingAddTodoView.toggle()
                }) {
                    Image(systemName: "plus")
                } //: ADD BUTTON
                .sheet(isPresented: $showingAddTodoView) {
                    AddTodoView()
                }
            )
        } //: NAVIGATION
    }
}

Add 버튼을 누르면 AddTodoView가 시트로 나오게끔 해준다.

@Environment(\.presentationMode) var presentationMode

@Environment(.presentationMode) var presentationMode는 SwiftUI에서 현재 뷰의 프레젠테이션 상태를 제어하기 위해 사용되는 코드다.

@Environment: SwiftUI의 환경 변수에 접근하기 위한 속성 래퍼입니다. 이를 통해 시스템 또는 상위 뷰에서 제공하는 값에 접근할 수 있습니다.

@Environment를 사용하여 현재 뷰의 환경 설정에 접근할 수 있습니다. 예를 들어, 다크 모드 여부, 지역 설정, 글꼴 크기 등과 같은 정보를 가져올 수 있습니다.

presentationMode: 현재 뷰의 프레젠테이션 상태를 나타내는 환경 값입니다. 이를 통해 모달로 표시된 뷰를 닫거나, 네비게이션 스택에서 현재 뷰를 팝할 수 있습니다.

.navigationBarItems(trailing:
                Button(action: {
                    self.presentationMode.wrappedValue.dismiss()
                }) {
                    Image(systemName: "xmark")
                }
            )

self.presentationMode.wrappedValue.dismiss()를 이용해서 sheet를 닫습니다.