[Swift] State와 Binding이 무엇일까?

Property Mapper(@)

프로퍼티가 저장되는 방식을 관리하는 코드를 추가시켜 주는 것.(재사용 가능)

@State

SwiftUI에 의해 관리되는 property wrapper 타입

변수가 변경될 때, View에서도 update 되면서 값이 변경되길 원할 때 사용.

@State 사용

struct StateBasic: View {
    // property
    @State var backgroundColor: Color = Color.green
    @State var myTitle: String = "아직 버튼 안눌림"
    @State var count: Int = 0
}

 

와 같이 사용 가능.

HStack (spacing: 20) {
    Button {
        // action
        backgroundColor = .red
        myTitle = "1번 버튼 눌림"
        count += 1  // count = count + 1
    } label: {
        Text("1번 버튼")
    }

    Button {
        // action
        backgroundColor = .purple
        myTitle = "2번 버튼 눌림"
        count -= 1
    } label: {
        Text("2번 버튼")
    }
}

이와 같이 값을 변경해주게 되면, 

화면에 관련된 설정을 해주지 않아도 바로 변경된다.

@State 사용 결과

 

버튼을 눌렀을 때 변경된 값이 바로 화면에 반영되는 것을 볼 수 있다. 

@Binding

@State를 @SubView(하위 뷰)에서 사용하기 위한 Wrapper

@Binding 실습

하위 뷰 코드

import SwiftUI

struct BindingChild: View {
    // property
    @State var buttonColor: Color = Color.blue
    @Binding var backgroundColor: Color
    @Binding var title: String
    
    var body: some View {
        Button {
            // action
            backgroundColor = .orange
            buttonColor = .pink
            title = "Binding Child View"
        } label: {
            Text("Child View 이동")
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal)
                .background(buttonColor)
                .cornerRadius(10)
        }
    }
}

상위 코드에서 넘겨줄 변수에 @Binding을 붙인다. 이 때, 상위 코드에서 넘겨주는 변수명과 하위 코드의  @Binding 변수의 이름은 같아야한다.

하위 뷰를 사용하는 상위 뷰 코드

struct BindingBasic: View {
    // property
    @State var backgroundColor: Color = Color.green
    @State var title: String = "Binding Basic View"
    
    var body: some View {
        ZStack {
            // background
            backgroundColor
                .ignoresSafeArea()
            
            // content
            VStack {
                Text(title)
                
                // button
                // parameter로 @State의 값에 $를 붙여준다.
                BindingChild(backgroundColor: $backgroundColor, title: $title)
            }
        }
    }
}

의 BindingChild 객체를 생성할 때 저렇게 파라미터로 @State의 변수명에 $를 붙여주어서 하위 뷰에 넘겨준다.

@Binding 사용 결과

 

하위 뷰에 넘겨준 title과 backgroundColor가 하위 뷰의 버튼 액션을 통해 상위 뷰의 값들을 바꾸는 것을 볼 수 있다.