Swift 독학하기 1 - To Do List

오늘부터 Swift 독학을 시작했습니다!😁
시작이 반이라고, 벌써 반이나 한 것 같습니다... 하하

오늘은 Xcode를 깔고, 깃허브와 연동해보고, 간단한 To Do List 앱을 클론코딩 해봤습니다!

이번 포스팅에서는 To Do List 앱 코드 설명과 속성 래퍼, HStack, VStack에 대해 정리해보겠습니다.

To Do List

import SwiftUI
import Combine

struct ContentView: View {
    @ObservedObject var taskStore = TaskStore()
    @State var newnewTask : String = ""
    var searchBar : some View{
        HStack{
            TextField("Insert New Task", text : self.$newnewTask)
            Button(action: self.addnewnewTask, label: {Text("Add New")})
        }
    }
    
    func addnewnewTask(){
        taskStore.tasks.append(Task(id:String(taskStore.tasks.count + 1), newTask : newnewTask))
        self.newnewTask = ""
    }
    
    var body: some View {
        NavigationView{
            VStack{
                searchBar.padding()
                List{
                    ForEach(self.taskStore.tasks){
                            task in
                            Text(task.newTask)
                        
                    }.onMove(perform: self.move)
                        .onDelete(perform: self.delete)
                }.navigationTitle("To Do List")
            }.navigationBarItems(trailing: EditButton())
        
    }
}

    
    func move (from source : IndexSet, to destination : Int){
        taskStore.tasks.move(fromOffsets: source, toOffset: destination)
    }
    func delete (at offsets : IndexSet){
        taskStore.tasks.remove(atOffsets: offsets)
    }
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
}

1. struct ContentView: View : ContentView는 SwiftUI에서 뷰를 구현하기 위한 구조체입니다.

2. @ObservedObject var taskStore = TaskStore() :taskStore는 TaskStore라는 클래스의 인스턴스로, @ObservedObject 속성으로 선언되었습니다. TaskStore는 관찰 가능한 객체로, 데이터의 상태 변화를 감지하고 뷰를 업데이트할 수 있게 합니다.

3. @State var newnewTask: String = "" : newnewTask는 문자열 타입의 @State 속성으로, 사용자가 입력한 새로운 할 일을 저장하는 변수입니다.

4. var searchBar: some View { ... } : searchBar는 검색 바를 구현하는 뷰입니다. TextField와 "Add New"라벨을 가지고 있으며, 사용자가 입력한 내용은 newnewTask에 바인딩됩니다.

5. func addnewnewTask() { ... } : addnewnewTask는 새로운 할 일을 추가하는 함수입니다. taskStore의 tasks 배열에 새로운 Task 인스턴스를 추가하고, newnewTask를 초기화합니다.

6. var body: some View { ... } : body는 뷰의 내용을 정의하는 계산된 속성입니다. NavigationView 내에 VStack과 List가 있으며, 할 일 목록을 표시하고 검색 바를 표시합니다.

7. func move(from source: IndexSet, to destination: Int) { ... } : move는 할 일 항목을 이동시키는 함수입니다. taskStore의 tasks 배열에서 source에서 destination으로 이동합니다.

8. func delete(at offsets: IndexSet) { ... } : delete는 할 일 항목을 삭제하는 함수입니다. taskStore의 tasks 배열에서 offsets에 해당하는 항목을 제거합니다.

9. struct ContentView_Previews: PreviewProvider { ... } : ContentView의 미리보기를 위한 코드입니다.

   ---

Binding

바인딩(Binding)은 SwiftUI에서 데이터와 뷰 간의 양방향 연결을 의미합니다. 데이터를 뷰에 표시하고 사용자 입력 또는 다른 이벤트에 응답하여 데이터를 업데이트하는 데 사용됩니다. 즉, 데이터의 변경 사항을 뷰에 반영하고, 뷰에서 발생한 사용자 입력이나 이벤트를 데이터에 전달하는 역할을 수행합니다.

바인딩은 @State, @Binding, @ObservedObject, @EnvironmentObject 등의 속성 래퍼를 사용하여 구현됩니다. 각각의 속성 래퍼는 다양한 상황에서 바인딩을 사용할 수 있는 방법을 제공합니다.

• @State 속성 래퍼를 사용한 바인딩은 가변 상태를 나타냅니다. 상태가 변경될 때마다 SwiftUI가 자동으로 뷰를 업데이트합니다. @State로 선언된 변수는 뷰의 생명주기 동안 유지되며, 해당 변수를 변경하면 뷰가 다시 그려지고 변경 사항이 반영됩니다.

• @Binding 속성 래퍼는 다른 뷰에서 전달된 데이터를 받아올 때 사용됩니다. @Binding 속성을 사용하여 데이터를 전달받은 뷰는 해당 데이터의 변경 사항을 추적하고, 데이터를 업데이트하면 변경 사항이 원래의 데이터 소스로 다시 전파됩니다.

• @ObservedObject 속성 래퍼는 관찰 가능한 객체를 사용할 때 바인딩을 구현하는 데 사용됩니다. 관찰 가능한 객체의 상태 변화를 감지하고, 변경 사항을 뷰에 반영하여 업데이트합니다.

• @EnvironmentObject 속성 래퍼는 앱의 환경 설정과 같은 전역적인 데이터를 바인딩할 때 사용됩니다. 여러 뷰에서 동일한 데이터에 접근하여 사용할 수 있고, 해당 데이터가 변경되면 뷰가 자동으로 업데이트됩니다.

바인딩은 SwiftUI에서 데이터 흐름과 UI를 효율적으로 관리하는 데 중요한 역할을 합니다. 데이터와 뷰 간의 실시간 연결을 제공하여 사용자 상호 작용에 따라 동적으로 UI를 업데이트하고, 변경 사항을 데이터에 반영하는 메커니즘을 제공합니다.

HStack

HStack은 SwiftUI에서 수평으로 정렬된 뷰의 컨테이너 역할을 하는 함수입니다. "H"는 수평(Horizontal)을 의미하며, HStack 안에 포함된 뷰들은 좌에서 우로 수평으로 배치됩니다.

HStack 함수의 기본 구문은 다음과 같습니다:

func HStack<Content>(alignment: VerticalAlignment = .center, spacing: CGFloat? = nil, content: () -> Content) -> some View where Content : View

주요 매개변수와 기능은 다음과 같습니다:

• alignment (기본값: .center) : HStack 안에 포함된 뷰들의 수직 정렬 방식을 지정합니다. .top, .center, .bottom과 같은 VerticalAlignment 열거형 값으로 설정할 수 있습니다.
• spacing : HStack 안에 포함된 뷰들 사이의 간격을 설정합니다. spacing 매개변수를 생략하면 기본값으로 자동으로 조정됩니다.
• content : HStack 안에 포함될 뷰들을 구성하는 클로저입니다. HStack 안에 포함될 각 뷰는 이 클로저 안에서 정의됩니다.

다음은 HStack을 사용하여 두 개의 Text 뷰를 수평으로 배치하는 예시입니다:

HStack {
    Text("Hello")
    Text("World")
}

VStack

VStack은 SwiftUI에서 수직으로 정렬된 뷰의 컨테이너 역할을 하는 함수입니다. "V"는 수직(Vertical)을 의미하며, VStack 안에 포함된 뷰들은 위에서 아래로 수직으로 배치됩니다.

VStack 함수의 기본 구문은 다음과 같습니다:

func VStack<Content>(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, content: () -> Content) -> some View where Content : View

주요 매개변수와 기능은 다음과 같습니다:

• alignment (기본값: .center) : VStack 안에 포함된 뷰들의 수평 정렬 방식을 지정합니다. .leading, .center, .trailing과 같은 HorizontalAlignment 열거형 값으로 설정할 수 있습니다.

• spacing: VStack 안에 포함된 뷰들 사이의 간격을 설정합니다. spacing 매개변수를 생략하면 기본값으로 자동으로 조정됩니다.

• content: VStack 안에 포함될 뷰들을 구성하는 클로저입니다. VStack 안에 포함될 각 뷰는 이 클로저 안에서 정의됩니다.

다음은 VStack을 사용하여 두 개의 Text 뷰를 수직으로 배치하는 예시입니다:

VStack {
    Text("Hello")
    Text("World")
}

---

다음 시간에는 만든 앱을 제가 원하는 디자인으로 예쁘게 수정해보겠습니다~!

(Scalable Scripts님 유튜브 참고하였습니다.)