[Swift 기초문법] @State, @Binding 을 알아보자

SwiftUI는 데이터 주도 방식으로 개발하고 게시자/구독자를 구축해서 데이터를 주고 받죵

4가지의 객체로 사용자 인터페이스의 모양과 동작을 결정하는 상태를 제공하는데

여개서 4가지가 @State, @Binding, @environmnet, @Observable 이렇게 있습니다.

 

그중에서 오늘은 묵혀놓았던 @State, @Binding에 대해 빠르고 간단하게 정리해볼게요.

@Obersvable이랑 @Environmnet는 다음 게시물로... !!

 

1. @state ( = 상태 프로퍼티)

• 값의 변화를 감지해서 값이 변하면 뷰를 다시 그려주는 프로터티 입니당(뷰에 적용시켜줌)
• 상태프로퍼티는 상태에 대한 가장 기본적인 형태이며, 현태 뷰의 상태를 저장하기 위해서만 사용해요!
  • 토글 버튼 활성화 유무
  • 텍스트 필드에 입력된 텍스트
  • 피커뷰에서의 현재 선택 등..
• String, Int와 같은 간단한 타입을 저장하기 위해서 사용되며 @State 를 사용하여 선언함
• 또한, 현재뷰 즉 그 뷰에 바인딩된 것이기 때문에 private 프로퍼티로 선언되어야 해요! (안 써도 오류는 없겠져?)

즉, 현재 바인딩(묶여있는) 되어있는 뷰에서 어떤 변경이 일어나면 해당 상태 프로퍼티에 자동으로 반영되며,
상태 프로퍼티와의 바인딩은 한 값을 사용할 때는(상태를 바꾸는 경우에) $를 붙이면 됩니다.

 

 

예시를 들어볼게용.

• 텍스트필드는 사용자가 입력한 텍스트를 받아오니까 상태가 변하는 프로퍼티를 넣어주어야겠져?
• 그래서 텍스트필드가 전형적인 상태프로퍼티 사용 예시입니다!
• 그래서 상태가 변할 수 있음을 알리는 래퍼인 @State 를 사용하여 UserName 데이터를 만듭니당
• 그런 다음 값을 받는 곳인 TextField에서 값을 받아오는 $를 사용해서 $userName으로 값을 받아옵니다.
• 좀 더 추가해보자면, @State 는 값 “저장”이며, 단방향 프로세스인거져 !!

struct ContentView: View {
    @State private var wifiEnabled = true
    @State private var userName = ""
    
    var body: some View {
        VStack {
            TextField("이름 입력 : ", text: $userName)
        }
    }
}

  

그래서 이제 여기서 새롭게 할당된 $userName 값을 사용하는 방법은, $없이 사용하면 됩니다.

값이 바뀌었고, 그 렇게 새로 할당된 값을 참조하여 사용하기 때문에 $를 붙일 필요가 없다는 말입니당

 

 

2. @Binding - 상태 바인딩

• 데이터를 묶어서 뷰와 뷰끼리의 데이터 이동이 가능하도록 만들어 주는 것이에요.
• state는 단방향이면서, 하나의 뷰에서만 사용할 수 있는 상태 프로퍼티였다면,
  Binding은 @State로 설정한 상태 프로퍼티를 바인딩 하여 하위 뷰에 적용할 수 있게 만들어줍니다.

 

이해가 안 갈테니.. 예제로 살펴봅시당

• 지금 우리는 위 예제에서 wifi의 상태를 표시하는 값을 다른 뷰에서도 사용하고 싶은거에요.
• 그래서 위 예제의 뷰랑 다른 뷰랑 묶어서 동일한 값인 @wifiEnable을 같이 사용하는 겁니다.
• 이제 그거를 가능하도록 뷰를 묶어주는 키워드가 @Binding인것이져!

그래서.. 가져올 데이터 앞에 @Binding을 써서 가져오는 곳의 뷰랑 묶어주고,

거기 있는 값을 가져와서 사용하는거에요!

 

이제 Toggle에 새롭게 정의한 WifiImageView가 호출될 때 상태 프로퍼티에 대한 바인딩을 전달하면 되는거져!

struct ContentView: View {
    @State private var isPlaying: Bool = false // Create the state.
    @State private var wifiEnabled = true
    @State private var userName = ""
    
    var body: some View {
        VStack {
            Toggle(isOn: $wifiEnabled) {
                HStack {
                    Text("WIFI INFO")
					// 새롭게 정의한 뷰에 $를 사용하여 wifi 값을 보내주는 것
                    WifiImageView(wifiEnabled: $wifiEnabled)
                }
            }
            TextField("이름 입력 : ", text: $userName)
            Text("\\(userName)")           
        }.padding(40)
        
    }
}

struct WifiImageView: View {
	// ContentView에서 보낸 값을 @Binding해서 받아서 사용
    @Binding var wifiEnabled: Bool
    // toggle on off state
    // 초기값 false, true라면 wifi, false라면 꺼진 wifi
    var body: some View {
        Image(systemName: wifiEnabled ? "wifi" : "wifi.slash")
    }
}

그러니까 바인딩은 하위뷰에서 상위뷰에 접근해서 어떤 데이터를 사용하고 싶을 때 묶어서 사용한다고 생각하시면 됩니당

혹시 부족한 설명이 있다면.. 말씀 주세여!

 

 

 

노션에 있던거 정리해서 올리기...

오포완!

틀린거 있으면 댓글주세요.. !