[SwiftUI] 상태 프로퍼티 @State와 @Binding 사용

 

☆ [핵심만 골라배우는 SwiftUI 기반의 iOS 프로그래밍] 책 내용 중 기억할 내용을 정리하였습니다.

---

■ 상태 프로퍼티

: 상태에 대한 가장 기본적인 형태

- 뷰 레이아웃의 현재 상태(토글 버튼 활성화 여부, 텍스트 필드에 입력된 텍스트, 피커 뷰에서의 현재 선택)를 저장하기 위해서 사용된다.

- String 이나 Int 값처럼 간단한 데이터 타입을 저장하기 위해 사용된다.

---

□ @State 프로퍼티 래퍼

상태 프로퍼티 값이 변경되면, 프로퍼티가 선언된 뷰 계층 구조를 다시 렌더링한다. ( 뷰를 다시 그린다는 말 )

프로퍼티 값이 바뀔 때마다, 최신 값이 반영되도록 업데이트 된다.

 

ex ) toggle을 이용하여 버튼 클릭시 isused가 ture, false로 바뀌게 됨

 

Text에 isused의 상태를 넣어주었기 때문에, 그 값이 변경될 때마다 화면을 다시 렌더링해야함

import SwiftUI

struct SwiftUIView: View {
    @State private var isused: Bool = false
    
    var body: some View {
        Text(isused.description)
        
        Button(action: {
            isused.toggle()
        }, label: {
            Text("Hit!")
        })
    }
}

 

 

---

□ @State \ @Binding 프로퍼티 래퍼

사용하고자 하는 프로퍼티가 같은 뷰에 있지 않을 경우, @Binding 프로퍼티 래퍼를 이용하여 변수를 선언해주면 된다. 

 

ex ) 위의 예시와 동작하는 방식은 같으나, 하위 뷰에 버튼을 따로 빼서 넣어 보았음

뷰 호출 시, 상태 프로퍼티에 대한 바인딩을 전달하면 됨 !

import SwiftUI

struct SwiftUIView: View {
    @State private var isused: Bool = false
    
    var body: some View {
        VStack {
            Text(isused.description)
            ex2View(isused: $isused)
        }
    }
}
struct ex2View : View {
    @Binding var isused : Bool
    
    var body: some View {
        
        Button(action: {
            isused.toggle()
        }, label: {
            Text("Hit!")
        })
    }
}

#Preview {
    SwiftUIView()
}

 

+ 추가 )

@Binding 안 쓰고 @State를 쓰면 어떻게 될까 ??

- 아무리 버튼을 눌러도 fase -> true로 변하지 않는다 !

 

struct ex2View : View {
    @State var isused : Bool
    
    var body: some View {
        
        Button(action: {
            isused.toggle()
        }, label: {
            Text("Hit!")
        })
    }
}