# 활동학습 - SwiftUI

## 🔶 실험 1: Toggle View 구현하기
#### ToggleView의 파일의 View가 어떻게 구성되어있는지를 분석해봅시다.
- ZStack으로 큰 화면이 구성되어 있고, VStack으로 Text와 Toggle이 감싸져있다.

#### stateToggle 을 누를 때 View에는 어떤 변화가 있을까요?
- @State 프로퍼티인 isStateToggleOn 값이 변경된다.
- @State 프로퍼티가 변경되면 뷰가 업데이트된다.
- @State 프로퍼티를 하위 뷰에 바인딩으로($) 전달한다.

#### stateToggle 토글 스위치가 켜져있으면 Text에 State On 이, 토글 스위치가 꺼져있으면 Text에 State Off 가 나타나려면 어떻게 해야할까요?

    VStack {
        if isStateToggleOn {
            Text("State On")
        } else {
            Text("State Off")
        }

        Toggle("State", isOn: $isStateToggleOn)
            .padding()
    }

#### State PropertyWrapper는 View에서 어떤 역할을 할까요?
- 값의 변화가 있을 때 View에 알림을 보낸다.

<br>

## 🔶 실험 2: ToggleView 네 개를 조합해 ContentView 생성

#### ContentView 파일에서 하위 View를 조합해 사진과 같은 UI를 만들어봅시다. Stack , 또는LazyVGrid 활용

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                ToggleView()
                ToggleView()
            }
            
            HStack {
                ToggleView()
                ToggleView()
            }
        }
        .padding(.vertical, 250)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

## 🔶 실험 3: 여러 뷰가 동시에 관찰하는 Property 생성
### ContentView를 다음과 같이 동작하도록 하기 위해서는 어떻게 해야할까요?

// Model.swift
class Model: ObservableObject {
    @Published var isSharedStateToggleOn: Bool = false
}

// ToggleView.swift
struct ToggleView: View {
    @State private var isStateToggleOn: Bool = false
    @EnvironmentObject var model: Model
    
    var body: some View {
            
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .stroke(lineWidth: 2)
                .foregroundColor(.red)
            
            VStack {
                if isStateToggleOn {
                    Text("State On")
                } else {
                    Text("State Off")
                }

                Toggle("State", isOn: $isStateToggleOn)
                    .padding()
                
                Toggle("Environment", isOn: $model.isSharedStateToggleOn)
                    .padding()
            }
        }
        .padding()
    }
}

struct EnvironmentToggleView_Previews: PreviewProvider {
    static var previews: some View {
        ToggleView()
            .environmentObject(Model())
    }
}

// ContentView.swift
struct ContentView: View {
    @EnvironmentObject var model: Model

    var body: some View {
        VStack {
            HStack {
                ToggleView()
                ToggleView()
            }
            
            HStack {
                ToggleView()
                ToggleView()
            }
        }
        .padding(.vertical, 150)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(Model())
    }
}

### ObservedObject, StateObject, EnvironmentObject은 각각은 어떤 차이가 있고, 사용법에 있을까요?

- ObservedObject
- StateObject
- EnvironmentObject