SwftUI - @State, @Binding

@State와 @Binding은 모두 데이터의 서유와 공유 방식을 다루는 두가지 property wrapper입니다.

 

@State

• 뷰 내에서 private 상태를 관리하기위한 프로퍼티 래퍼입니다.
• 뷰 내부 상태를 저장하기위해 사용됩니다.
• 해당 프로퍼티 래퍼로 생성된 변수의 상태 변경시 뷰가 자동으로 업데이트되게합니다.
• ValueType으로 Struct, Enum 활용이 적절합니다.
• @State프로퍼티 값이 변경될 때 마다 뷰를 다시 랜더링합니다. 최신 상태를 유지하도록.

 

여기서 $가 등장합니다.

Toggle의 isOn값은 Binding<Bool> 값을 받으므로 $를 붙혀 초기화합니다.

• isOn -> Bool값
• $isOn -> Binding<Bool>

 

@Binding

• 부모뷰로부터 전달받은 상태 또는 다른뷰와의 상태를 공유하기위한 프로퍼티 래퍼입니다.
• 한 뷰의 @State프로퍼티를 다른 뷰와 "바인딩"하여 상태 변경을 여러뷰에 걸쳐 동기화합니다.
• 부모뷰가 소유한 상태를 자식뷰가 참조하고 조작할 수 있도록 해줍니다.
• @Binding 변수 자체가 상태의 소유권을 갖지는 않습니다.

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

    var body: some View {
        ChildView(isOn: $isOn)
    }
}

struct ChildView: View {
    
    //Binding Annoation을 붙이면 Binding<Bool>을 인자로받아 초기화 시킬 수 있습니다.
    @Binding var isOn: Bool

    var body: some View {
        Toggle("Switch", isOn: $isOn)
    }
}

 

단순히 @Binding 어노테이션으로 선언하여 초기화할 때 State값을 받는 것만으로 여러 개의 뷰가 동시에 State값을 참조할 수 있습니다. 하지만 State는 Toggle 유무와 같은 UI의 상태 값과 같은 아주 한정된 용도로만 사용하기를 권고하고 있는데 그 이유는 뷰 안에만 사용하는 메모리 공간이기 때문입니다. 만약 뷰 밖의 클래스에서 사용한다면? ObservableObejct를 사용할 수 있습니다.

 

$기호의 의미 

$기호는 다음 포스팅에서 설명합니다.
https://clamp-coding.tistory.com/511

 

추가적으로 설명하자면 

'$'를 사용하는 것은 SwiftUI에서 "바인딩"을 생성하는 단축 방식입니다.

 

바인딩이란, UI 컴포넌트(예: 텍스트 필드, 스위치)와 데이터를 양방향으로 연결하는 것을 의미합니다.

즉, UI 컴포넌트의 상태가 변경될 때 데이터도 함께 업데이트되고, 데이터의 변경이 UI에도 반영됩니다.