# 실험 1: Toggle View 구현하기

## 📋 Todo

### ToggleView의 파일의 View가 어떻게 구성되어있는지를 분석해봅시다.
- ToggleView.swift
- isStateToggleOn 프로퍼티(Bool)
- body(View)
- ZStack
- RoundedRectangle
- VStack
- Text
- Toggle

### stateToggle 을 누를 때 View에는 어떤 변화가 있을까요?
- isStateToggleOn의 값이 바뀝니다.
- View 전체가 다시 그려집니다.

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

VStack {
    isStateToggleOn ? Text("State On") : Text("State Off")
    // Text(isStateToggleOn ? "State On" : "State Off")
    (...)
}

### State PropertyWrapper는 View에서 어떤 역할을 할까요?
> A property wrapper type that can read and write a value managed by SwiftUI.

- @State는 구조체 내부에서 단일 뷰의 값을 수정할 수 있도록 합니다.
- 뷰 내부에 값을 저장하고 그 값의 변화를 추적하여 뷰를 다시 그릴 수 있도록 합니다.
- 자식 뷰가 있다면 부모 뷰에서 @State가 붙은 값에 변화가 생길 경우 자식 뷰도 업데이트시킵니다. 단 자식 뷰에서 직접 부모 뷰의 프로퍼티 값을 변화시킬 수는 없습니다.

# 실험 2: ToggleView 네 개를 조합해 ContentView 생성
## 📋 Todo
### ContentView 파일에서 하위 View를 조합해 사진과 같은 UI를 만들어봅시다. Stack , 또는LazyVGrid 활용

struct ContentView: View {
    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem()]) {
            ToggleView()
            ToggleView()
            ToggleView()
            ToggleView()
        }
    }
}

# 실험 3: 여러 뷰가 동시에 관찰하는 Property 생성
## 📋 Todo
### Model 클래스 내부의 프로퍼티가 바뀌었을 때, 이를 관찰하고 있는 View가 자동적으로 갱신되게 해봅시다.

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

// ContentView.swift
struct ContentView: View {
    @StateObject private var model = Model()
    
    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem()]) {
            ToggleView(model: model)
            ToggleView(model: model)
            ToggleView(model: model)
            ToggleView(model: model)
        }
    }
}

// ToggleView.swift
struct ToggleView: View {
    @State private var isStateToggleOn: Bool = false
    @ObservedObject var model: Model
    
    var body: some View {
            
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .stroke(lineWidth: 2)
                .foregroundColor(.red)
            
            VStack {
                Text(isStateToggleOn ? "State On" : "State Off")
                
                Toggle("State", isOn: $isStateToggleOn)
                    .padding()
                
                Toggle("Environment", isOn: $model.isEnvironmentStateToggleOn)
                    .padding()
            }
        }
        .padding()

    }
}

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

### ObservedObject / StateObject EnvironmentObject 차이점
- `ObservedObject`
> A property wrapper type that subscribes to an observable object and invalidates a view whenever the observable object changes.
- 관찰 가능한 객체의 게시된 프로퍼티가 변경되면 SwiftUI가 객체에 의존하는 **모든 뷰**를 업데이트
- `StateObject`
> A property wrapper type that instantiates an observable object.
- SwiftUI는 state object를 선언하는 컨테이너의 수명 동안 model object의 새 인스턴스를 한 번만 생성
- 예를 들어, SwiftUI는 뷰의 입력이 변경되는 경우 새 인스턴스를 생성하지 않지만, 뷰의 ID가 변경되는 경우 새 인스턴스를 생성
- StateObject를 통해서 관찰되고 있는 객체는 그들이 가지고 있는 화면 구조가 재생성되어도 파괴되지 않음.
- `EnvironmentObject`
> A property wrapper type for an observable object that a parent or ancestor view supplies.
- superview에서 subview에 특정 상태를 주입하여, subview에서 그 상태에 접근할때 사용
- subview에서 superview로부터 주입받은 @EnvironmentObject 프로퍼티를 변경시키면 부모에서도 모든 뷰가 업데이트
- 전역적으로 데이터를 공유하는 형태이므로, 뷰 간 데이터를 공유할때 사용