20. [SwiftUI] @Binding

이전 시간에 공부한 @State와 마찬가지로 property wrapper인 @Binding에 대해 알아보자.

 

기본적으로 @State 변수는 속해있는 뷰를 업데이트 하는데 사용된다.

하지만 앱을 만들다 보면 뷰(부모뷰) 안에 여러 뷰들(자식뷰)이 있는 경우가 많다. (대부분이 그렇다.)

만약 버튼을 따로 뷰로 만들었고, 부모뷰에서 버튼뷰를 생성하는 상황을 가정하자.

 

그러면 버튼뷰(자식뷰)에서 부모뷰의 @State변수를 변경하고 싶으면?? (부모 뷰를 업데이트 하고 싶으면)

이 때 사용하는 것이 @Binding이다.

즉 바인딩은 상위 뷰(부모 뷰)와 하위 뷰(자식 뷰) 사이에서 @State 변수를 연결하는 것이다.

즉 하위 뷰에서 상위 뷰를 업데이트 하는 상황에서 필요하다.

 

예시코드를 보며 좀 더 자세히 알아보자.

//  Created by Toughie on 2023/04/23.
//

import SwiftUI

struct Bindings: View {
    
    //부모뷰의 state 변수. 이 변수가 변경되면 *부모뷰가 업데이트 된다.
    //*여기서는 struct Bindings
    @State var backgroundColor: Color = Color.green
    @State var title: String = "Title"
    
    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea()
            VStack {
                Text(title)
                    .foregroundColor(.white)
                    .font(.title)
                    
                //생성자를 이용해 자식뷰인 ButtonView를 초기화한다.
                //파라미터가 바인딩 변수이기에 $를 붙여준다.
                // ->연결할 부모뷰의 @State변수 앞에 $를 붙여주는 방식이다.
                ButtonView(backgroundColor: $backgroundColor, title: $title)
            }
        }
    }
}

struct ButtonView: View {
    
    @Binding var backgroundColor: Color
    @Binding var title: String
    
    @State var buttonColor: Color = Color.blue
    
    var body: some View {
        Button {
            //buttonColor는 현재 @State 변수이기에 부모뷰의 업데이트와 관련이 없다.
            //버튼뷰(자식뷰)만 업데이트 한다.
            buttonColor = Color.pink
            
            /*
            backgroundColor, title은 @Binding 변수이다.
            버튼을 누르면 해당 @Binding변수들의 값이 변경되고, 이는 부모뷰(struct Bindings)
            의 @State 변수들과 연결되어 있어 부모뷰의 @State 변수 값이 변경되며 
			부모뷰가 업데이트 되는 것이다.
            */
            backgroundColor = Color.blue
            title = "Title Changed"
            
        } label: {
            Text("Button")
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal)
                .background(buttonColor)
                .cornerRadius(10)
        }
    }
}

말로 하면 복잡하게 느껴질 수 있는데..

요약하자면 버튼을 누르면 총 3가지 변화가 일어난다.

1. 버튼 자체의 색깔을 바꾼다 -> 이는 버튼뷰(자식 뷰)의 @State 변수값을 변경하는 것이다.

2. 배경색을 바꾼다 -> 이는 Bindings뷰(부모 뷰)의 @State 변수 값을 변경하는 것이다. (바인딩 연결)

3. Title을 바꾼다 -> 이는 Binding뷰(부모 뷰)의 @State 변수 값을 변경하는 것이다. (바인딩 연결)

 

즉 자식뷰인 버튼이 눌렸을 때 부모뷰(Bindings)를 업데이트 하기 위해서 (부모 뷰의 @State 변수값을 변경하기 위해서)

바인딩 처리를 한다는 것이다. 

 

-> 하위 뷰에서 상위 뷰를 업데이트 하는 경우!