1. SwitftUI 앱의 기본 구조 이해하기

...App.swift

import SwiftUI

@main
struct WeSplitApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

// 앱 실행을 위한 코드가 포함되어 있습니다. 앱이 시작될 때 무언가를 만들고 
// 전체 시간 동안 활성 상태로 유지하는 경우 여기에 넣는다. 

ContentView.swift

// 프로그램의 초기 사용자 인터페이스가 포함되어 있으며 이곳에서 프로젝트의 모든 작업을 수행한다

import SwiftUI
// 스위프트에 SwiftUI 프레임워크가 제공하는 모든 기능을 사용하고 싶다고 알려준다.

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}
// View는 SwiftUI에서 왔으며, 화면에 그리려는 모든 항목에 채택되어햐 하는 기본 프로토콜이다.
// ContentView는 위 프로토콜을 준수하는 구조체이다.
// var body: some View 는 계산속성이다. 이것은 우리의 레이아웃인 프로토콜을 준수하는 것을 반환한다는 것을 의미한다.
// 

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
// PreviewProvider 프로토콜을 준수하는 구조체 ContentView_Previews 
// 이 코드 조각은 실제로 App Store로 이동하는 최종앱의 일부가 아니지만 
// Xcode에서 UI디자인의 미리보기를 표시할 수 있다.

Assets.xcassets

// 앱에서 사용하료는 사진 모음 목록이다. 앱아이콘 등등 

Content Preview

// 사용자 인터페이스를 디자인할 때 프로그램이 실행됨

2. 프로그램 상태 수정

struct ContentView: View {
    @State var tapCount = 0 // 속성 래퍼 @State 프로그램 상태를 저장하는 변수에 속성래처 사용 

    var body: some View {
        Button("Tap Count: \\(tapCount)") {
            self.tapCount += 1
        }
    }
}

3. UI 컨트롤에 상태 바인딩

struct ContentView: View {
    @State private var name = "" // @State

    var body: some View {
        Form {
            TextField("Enter your name", text: $name) // $name 텍스트필드가 name 속성에 바인딩 
            Text("Hello, world!")
        }
    }
}

// 텍스트 필드와 name속성을 양방향 바인딩하여 텍스트필드를 변경하면 속성도 업데이트 되도록한다.
// 스위프트에서 이러한 양방향 바인딩을 특수기호 $로 표시한다 

4. 반복문에서 뷰 만들기

struct ContentView: View {
    let students = ["Harry", "Hermione", "Ron"]
    @State private var selectedStudent = "Harry"

    var body: some View {
        NavigationView {
            Form {
                Picker("Select your student", selection: $selectedStudent) {
                    ForEach(students, id: \\.self) { // \\.self 항상 고유한 문자열이 있다.
                        Text($0)
                    }
                }
            }
        }
    }
}

5. TextField를 사용해 사용자의 텍스트 읽기

struct ContentView: View {
    @State private var checkAmount = 0.0
    @State private var numberOfPeople = 2
    @State private var tipPercentage = 20
    let tipPercentages = [10, 15, 20, 25, 0]
    var body: some View {
        NavigationView {
            Form {
                Section {
                    TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                        .keyboardType(.decimalPad)
                }

                Section {
                    Text(checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                }
            }
        }
    }
}

6. Form에서 Picker 만들기

struct ContentView: View {
    @State private var checkAmount = 0.0
    @State private var numberOfPeople = 2
    @State private var tipPercentage = 20
    let tipPercentages = [10, 15, 20, 25, 0]
    var body: some View {
        NavigationView {
            Form {
                Section {
                    TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                        .keyboardType(.decimalPad)
                    Picker("Number of people", selection: $numberOfPeople) {
                           ForEach(2 ..< 100) {
                               Text("\\($0) people")
                           }
                       }
                }

                Section {
                    Text(checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                }
            }.navigationTitle("WeSplit")
        }
    }
}

7. @FocusState