[iOS] @State, @Binding

@State란?

@State는 SwiftUI에서 사용되는 프로퍼티 래퍼(Property Wrapper) 중 하나로, 뷰의 상태(state)를 관리하기 위해 사용됩니다. @State로 선언된 프로퍼티는 값의 변화를 감지하여 해당 뷰의 렌더링을 자동으로 업데이트하게 됩니다.

@State 사용 시 주의해야 할 것❗

공식 문서를 보면 @State 프로퍼티는 항상 private로 선언을 해야 하고, 가장 상위 뷰에서 관리해야 한다고 합니다.

@Binding란?

@Binding은 SwiftUI에서 사용되는 프로퍼티 래퍼(Property Wrapper) 중 하나로, 뷰 간의 데이터 바인딩을 위해 사용됩니다. 데이터 바인딩은 한 뷰의 상태를 다른 뷰와 연결하여 두 뷰가 동일한 데이터를 공유하고, 동기화되도록 만드는 것입니다.
쉽게 설명하자면 자식 뷰에서 @Binding을 사용해서 만든 property 값이 변경되면 부모의 특정 property 값도 변경되게 만듭니다.

예제

아래의 코드는 버튼을 누르면 1씩 증가되고 Text로 보이도록 만든 간단한 코드입니다.

• ParentView

import SwiftUI

struct ParentView: View {
    @State private var counter = 0
    
    var body: some View {
        VStack {
            ChildView(myBindingVariable: $counter)
            Text("count: \(counter)")
        }
    }
}

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

• ChildView

import SwiftUI

struct ChildView: View {
    @Binding var myBindingVariable: Int
    
    var body: some View {
        Button("누르면 +1 하는 버튼") {
            myBindingVariable += 1 // 부모 뷰의 counter 값도 함께 증가
        }
    }
}

struct Second_Previews: PreviewProvider {
    static var previews: some View {
        ChildView(myBindingVariable: .constant(3))
    }
}

위의 예시에서 ParentView(상위 뷰)에서 private로 @State를 사용하여 변수 counter를 선언하고, 이를 ChildView로 바인딩으로 전달합니다. ChildView에서는 전달받은 바인딩 myBindingVariable를 사용하여 버튼을 누를 때마다 counter 값을 증가시키면, 부모 뷰의 counter 값도 함께 증가하게 되어 UI가 자동으로 업데이트됩니다.