SwiftUI에서 속성 래퍼(@State, @Binding, @ObservedObject, @EnvironmentObject) 이해하기

안녕하세요! 오늘은 swiftUI에서 자주 사용되는 속성 래퍼에 대해 알아볼 건데요, 속성 래퍼를 활용하면 
데이터 바인딩과 관리가 훨씬 쉬워집니다. 이 글에서는 @State , ( 제목 참조) 에 대해 아주 쉬운 예제와 함께
설명해 드리겠습니다.

 

 

본문

1. @State 는 SwiftUI에서 가장 기본적인 속성 래퍼입니다. 주로 뷰 내부에서 사용되며, 뷰가 
직접 소유하고 관리하는 값을 변경할 때 사용합니다. 이를테면, 토글 값이나 입력 테스트, 슬라이더 값 등이 있죠.

예를 들어, 뷰에서 사용자가한 텍스트를 관리하려면 다음과 같이 @State를 사용할 수 있습니다.

struct ContentView: View {
    @State private var inputText = ""

    var body: some View {
        TextField("Enter text here", text: $inputText)
            .padding()
    }
}

 

2.@Binding

@Binding은 뷰 간에 값을 공유할 때 사용되는 속성 래퍼입니다. 즉 뷰의 부모와 자식 간에 값을 전달하고 
변경할 수 있게 합니다. 이렇게 함으로써 뷰 계층 구조를 깔끔하게 유지할 수 있습니다.

예를 들어, 부모 뷰에서 토 값을 공유하려면 다음과 같이 @Binding을 사용할 수 있습니다.

struct ParentView: View {
    @State private var isToggleOn = false

    var body: some View {
        VStack {
            Toggle("Toggle button", isOn: $isToggleOn)
            ChildView(isToggleOn: $isToggleOn)
        }
    }
}

여기서 $isToggleOn으로 표기된 것은 @Binding을 사용하게 해주는 것입니다.

그리고 자식 뷰에서는 다음과 같이 @Binding을 적용할 수 있습니다.

struct ChildView: View {
    @Binding var isToggleOn: Bool

    var body: some View {
        Text(isToggleOn ? "Toggle is on" : "Toggle is off")
    }
}

이렇게 하면 부모 뷰에서의 토글 값 변경이 자식 뷰에서도 반영되어 업데이트 됩니다. 이를 통해 뷰 간 값 공유가
원활하게 이루어지며, 뷰 계층 구조도 깔끔하게 유지할 수 있습니다. 이해가 되셨나요? 
이해 안되시는 부분은 댓글로 작성해주시면 감사하겠습니다 ~!