[iOS] SwiftUI property wrapper @State @Binding

@State

---

SwiftUI 는 state 로 선언한 프로퍼티의 저장소를 관리한다. 해당 프로퍼티의 값이 변경될 때, SwiftUI 는 값에 의존하고 있는 뷰 계층구조의 부분을 업데이트한다. State 프로퍼티는 하나의 뷰 안에서 사용되는 값으로, 일반적으로 private 키워드를 붙여서 사용한다. 

 

State instance 는 값(value)을 읽고 쓸 수 있는 형태이기 때문에, value 와 동일하지는 않다. state 가 갖고있는 value 에 액세스하기 위해서는, property name 을 통해 접근하면 된다. 해당 값은 wrappedValue 속성을 반환한다. wrappedValue 는 state 변수가 저장하고 있는 값을 접근하는 프로퍼티이지만, wrappedValue 를 직접 접근해서는 안된다. 

 

아래 예제는 PlayButton view 에서 isPlaying 이라는 state property 를 참조해서, 값을 읽고 업데이트하는 예제이다. Button label 은 isPlaying 값에 따라 Pause, Play 를 지정하고 있고, 버튼을 누를때 액션으로 isPlaying 값을 토글시키고 있다.

 

struct PlayButton: View {
    @State private var isPlaying: Bool = false

    var body: some View {
        Button(isPlaying ? "Pause" : "Play") {
            isPlaying.toggle()
        }
    }
}

 

 

@Binding

---

State 변수를 자식뷰로 전달할 경우, SwiftUI 는 부모뷰에서 state 변수의 값이 변경될 때 자식뷰에게 전달하지만, 자식뷰를 값을 직접 변경할 수 없다. 자식뷰에서 State 변수의 값을 수정할 수 있게 하려면 Binding 변수를 전달해야한다. 프로퍼티 이름 앞에 달러표시($) 를 붙이면, state value 에 대한 binding 인 projectedValue 을 받아올 수 있다. 

🖋 정리하자면 다음과 같다
propertyName 으로 접근시 Value 타입인 wrappedValue 를 반환한다.
$propertyName 으로 접근시 Binding<Value> 타입인 projectedValue 를 반환한다.

 

아래 예제는 위의 PlayButton View 에서 State 프로퍼티를 Binding 프로퍼티로 변경한 예제이다. PlayButton 뷰가 PalyerView 의 자식뷰로 사용될 경우에 State 을 이용한다면 부모뷰로 전달할 수 없기 때문에, Binding 으로 변경해 부모뷰의 state 와 연결해준 것이다.

 

PlayerView 에서 PlayButton 을 생성하는 코드를 보면 $isPlaying 으로 State 변수의 projectedValue 를 전달하고 있다. State 로 선언한 isPlaying 의 타입이 Bool 이므로, $isPlaying 로 반환되는 projectedValue 의 타입은 Binding<Bool> 이 된다. 

 

struct PlayButton: View {
    @Binding var isPlaying: Bool

    var body: some View {
        Button(isPlaying ? "Pause" : "Play") {
            isPlaying.toggle()
        }
    }
}

struct PlayerView: View {
    var episode: Episode
    @State private var isPlaying: Bool = false

    var body: some View {
        VStack {
            Text(episode.title)
                .foregroundStyle(isPlaying ? .primary : .secondary)
            PlayButton(isPlaying: $isPlaying) // Pass a binding.
        }
    }
}

 

참고로, View 를 인스턴스화 하는 뷰 계층에서 state property 를 초기화하면 안된다. SwiftUI 가 제공하는 스토리지 관리와 충돌할 수 있기 때문이다. 이를 방지하기 위해서 State 는 항상 private 으로 선언하고, 해당 값에 접근이 필요한 뷰 계층의 최상단 뷰에 State 를 배치해야한다.

 

또한, Binding 프로퍼티를 생성할 때에는 초기값을 지정할 수 없다. Binding 은 원본인 State 의 값을 연결하는 역할을 하기 때문에, 타입만 지정할 수 있다. Binding 프로퍼티를 갖는 View 의 생성자에서는 필수로 Binding 인자에 값을 지정해줘야한다.

 

State 프로퍼티의 값을 변경하는 것은 thread-safe 하다.

 

 

📄 참고 문서

• Property Wrapper @State - https://developer.apple.com/documentation/swiftui/state
• Property Wrapper @Binding - https://developer.apple.com/documentation/swiftui/binding
• Instance Property wrappedValue - https://developer.apple.com/documentation/swiftui/state/wrappedvalue
• Instatnce Property projectedValue - https://developer.apple.com/documentation/swiftui/state/projectedvalue