[Swift] @State, @Binding?

갑자기?

SwiftUI의 기본중에 기본이라고 할 수 있는 @State, @Binding에 대해서 다시한번 짚어보고 싶어서 포스팅을 남긴다.

기본 설명

아래와 같이 초 간단한 뷰를 만들어봤다.

조금 특이한(?) 점은 아래와 같이 상위 뷰에서 하위 뷰에 count를 전달할 수 있다.

struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        List {
            Section("Content View") {
                Stepper("\(count)", value: $count)
            }
            
            Section("Counter View") {
                CounterView(count: count)
            }
        }
    }
}

struct CounterView: View {
    @State var count = 0
    
    var body: some View {
        Stepper("\(count)", value: $count)
    }
}

하지만 변수를 전달받아도 @State로 선언한 이상 struct각각 소유하고 있는 값이므로 별개로 작동한다.

하지만 아래와 같이 @Binding으로 count를 받게 된다면 값이 같이 바뀌게 된다. 또한 하위 뷰에서도 count가 변경 가능하다.

@State가 View를 업데이트 하는 방식

단순히 뷰에 변경된 값을 표시하고 싶다면 아래와 같이 전달해도 무난하다.

그렇다면 의문이 생겼다. @State로 선언된 변수는 뷰를 업데이트 시키는 것으로 알고 있는데 var count: Int로 받은 CounterView가 어떻게 업데이트 되는 걸까? 우선 아래와 같이 let count: Int로 변경시켜 보았다. 그래도 뷰가 업데이트 되는걸 보니 count를 표시하는 뷰는 아예 다시 생성된다는 유추를 해볼 수 있다.

아래의 WWDC2024영상을 참고해보면 @State와 @Binding의 차이에 대해서 간단하게 설명해주고 있다.

SwiftUI essentials - WWDC24 - Videos - Apple Developer

@State로 속성을 선언한 순간, SwiftUI는 저장공간을 관리하고 View가 읽고 쓸 수 있도록 뷰에대한 새로운 데이터 소스를 생성한다. @Binding은 뷰의 데이터에 대한 양방향 참조를 제공한다.

SwiftUI는 백그라운드에서 상태의 값을 유지하고, 버튼을 누르게 되면 뷰의 내부 상태가 증가하게 된다. 

그렇게 된다면 SwiftUI에서 body를 호출하여 결과가 화면에 업데이트 되게 된다.