SwiftUI @Binding 알아보기

최근 SwiftUI 공부를 다시 시작하였다. 화면을 만드는 것은 UIkit보다 간결한 것 같지만 개념이 다른 부분이 달라 정리할 필요를 느꼈다..!

 

@Binding이란?

A Property wratter type that can read and write a value onwned by a source of truth

@Binding 프로퍼티 래퍼는 전달받은 데이터를 읽거나 직접 변경할 수 있도록 만들어진 타입이다. 

 

예시를 들어 @Binding을 왜 사용해야 하는지 알아보겠다.

SuperView

SubView

다음과 같이 SuperView안에 SubView(버튼)을 가져다 쓴다고 가정해보자.

SubView의 버튼은 SuperView의 클릭 여부에 따라서 상태가 바뀌게 될 것이다. 

이때, SuperView와 SubView의 상태는 같아야 한다. 

만약, 두 뷰가 각각 개별적인 값을 소유한다면 값이 불일치한 상황을 초래할 수 있다.

때문에 같은 생성자를 이용해 데이터를 주입한다면 두 뷰는 항상 같은 값을 나타낼 수 있을 것이다. 

이를 가능하게 해주는 것이 @Binding이다. 

 

 

이제 코드로 이해를 해보자 

SuperView

struct BindingPracticeView: View {
    @State private var isPlaying : Bool = false
    var body: some View {
        BindingPracticeButtonView(isPlaying: $isPlaying)
            .background(Color.green)
    }
}

SubView

struct BindingPracticeButtonView: View {
    @Binding var isPlaying : Bool
    var body: some View {
        Button(isPlaying ? "일시정지" : "재생") {
            isPlaying.toggle()
        }.padding()
    }
}

struct BindingPracticeButtonView_Previews: PreviewProvider {
    static var previews: some View {
        BindingPracticeButtonView(isPlaying: .constant(true))
            .previewLayout(.sizeThatFits)
    }
}

버튼을 클릭했을 때 isPlaying값이 true or false로 값이 할당된다. 

SuperView에 버튼을 클릭하면 isPlaying 값이 바뀔 것이다. 

또한 SubView 역시 bool 타입의 값으로 같이 변화해야 한다. 

 

만약 각각 값을 보유한다면, 상위 뷰의 값과 불일치가 발생할 수 있다. 

하위뷰를 상위뷰에 사용하려면 하위뷰를 초기화할 떄 상태 속성의 바인딩을 하위뷰의 바인딩 속성에 전달한다. 

이때 @Binding을 사용해서 상위 뷰의 상태를 참조하는 형태로, 상위 뷰가 가진 상태를 하위 뷰에서 수정할 수 있게 해준다. 

한마디로 Binding은 @State 프로퍼티와 묶어서 같은 값을 가질 수 있도록 해주는 것이다. 

추가로) 하위 뷰에서 Binding을 사용하면 Preview에서 에러가 발생하게 된다.

왜냐하면 현재 버튼은 false인지 true인지 값을 모르기 때문에 지정을 해달라는 의미이다. 

이때는 .constant 메서드를 사용해서 불변하는 값을 주고 preview를 정적인 데이터로 만들어 확인이 가능하다.