소피it블로그

[SwiftUI] Binding 정리 본문

개발_iOS/스위프트UI

[SwiftUI] Binding 정리

sophie_l 2022. 8. 11. 13:22

https://developer.apple.com/documentation/swiftui/binding

 

Apple Developer Documentation

 

developer.apple.com

source of truth가 소유하는 값을 읽고 쓸 수 있는 프라퍼티 래퍼 타입

 

데이터를 저장하는 프라퍼티와 해당 데이터를 보여주고 변경하는 뷰 간의 쌍방 연결을 생성하기 위해 바인딩을 사용한다. 바인딩은 데이터를 직접적으로 저장하는 대신 다른 곳에 저장된 source of truth에 프라퍼티를 연결시켜준다. 예를 들어, play와 pause를 번갈아가며 토글되는 버튼은 Binding 프라퍼티 래퍼를 통해 부모 뷰의 프라퍼티에 바인딩을 생성해줄 수 있다.

// 자식 뷰

struct PlayButton: View {
    @Binding var isPlaying: Bool

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

부모 뷰는 playing state에 관한 프라퍼티를 선언하는데, 이때 State 프라퍼티 래퍼를 사용함으로써 이 프라퍼티가 해당 값의 source of truth임을 명시한다.

// 부모 뷰

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.
        }
    }
}

PlayerView는 PlayButton을 초기화할 때 버튼의 바인딩 프라퍼티에 state 프라퍼티의 바인딩을 전달한다. $ 표시를 프라퍼티 래핑되는 값의 앞부분에 적어줌으로써 projectedValue를 반환받는데, 이를 통해 state 프라퍼티 래퍼가 해당 값에 대한 바인딩을 반환한다.

유저가 PlayButton을 탭할 때마다 PlayerView는 isPlaying state를 업데이트한다.