(3) State and Data Flow

@State

• 화면 상태를 나타내거나 표시할 때 사용하는 타입
• String, Int, Bool 과 같은 간단한 값을 저장하고 View의 현재 상태를 표시하기 위해 사용

@State private var isDisabled = true 

예제 1) TextField에서 입력한 것을 바로 Text로 표시해 보기
예제 2) Toggle의 상태에 따라 버튼 비활성화 / 활성화 해 보기

import SwiftUI

struct StateSample: View {
    @State private var currentText = ""
    var body: some View {
        VStack {
            TextField("텍스트를 입력해 주세요.", text: $currentText)
            Text(currentText)
        }
    }
}


struct StateSample: View {
    @State private var isDisabled = true
    var body: some View {
        VStack {
            Toggle(isOn: $isDisabled, label: {
                Text("버튼을 비활성화 시키겠습니까?")
            })
            Button("버튼") {}
                .disabled(isDisabled)
        }
    }
}

@Binding

• ChildView에서 ParentView의 값을 표시하고, 능동적으로 값이 변화할 때 사용
• ChildView에서 사용됨

@Binding private var isDisabled: Bool

예제) ParentView에 있는 isDisabled 바인딩하기

struct ParentView: View {
    @State private var isDisabled = true
    var body: some View {
        ChildView(isDisabled: $isDisabled)
    }
}


struct ChildView: View {
    @Binding var isDisabled: Bool // init 시점에서 isDisabled 값을 받을 것이기 때문에 타입만 명시
    var body: some View {
        VStack {
            Toggle(isOn: $isDisabled, label: {
                Text("버튼을 비활성화 시키겠습니까?")
            })
            Button("버튼") {}
                .disabled(isDisabled)
        }
    }
}

ChildView에서는 바인딩해서 참조하여 사용하고 있음

@ObserverdObject

• 모델로 실제 저장되거나 사용되는 데이터를 화면과 바인딩할 때 사용하는 타입

class Model: ObservableObject {
	@Published var name = ""
}
@ObservabledObject var model = Model()
$model.name

예제 코드

import SwiftUI
import Combine

final class TestModel: ObservableObject {
    @Published var isDisabled = true
}

struct MainView: View {
    @ObservedObject var testModel = TestModel()
    var body: some View {
        // 다른 곳에서도 활용 가능함
    }
}

struct ParentView: View {
    @State private var isDisabled = true
    @ObservedObject var testModel = TestModel()
    
    var body: some View {
        ChildView(isDisabled: $testModel.isDisabled)
    }
}