[SwiftUI] @State란?

 

안녕하세요 Foma 💻 입니다!

요즘 SwiftUI 공부를 하고 있는데 @State가 많이 쓰이긴 하는데 뭔지 정확히는 모르겠더라구요.

그래서 @State에 대해서 정확히 정리해보려고 합니다!

바로 시작할게요~

---

@State 란?

애플 공식 문서에는 아래와 같이 설명합니다.

 

해석해보면 SwiftUI에서 관리하는 값을 읽고 쓸 때 사용하는 것이라고 하네요.

개요를 살펴보면 아래와 같습니다.

 

1. 상태값이 변경되면 View를 다시 계산하고 업데이트 합니다.

2. 인스턴스 값이 아니라 값을 읽고 쓰는 수단입니다.

3. 주의할 점은 뷰의 바디 안에서 또는 뷰에서 호출한 메소드에서만 접근해야 하므로 뷰의 클라이언트가 접근하지 못하도록private로 선언해야 합니다.

4. 사용할 때는 $와 함께 사용하면 됩니다.

---

구현

이제 이론을 살펴봤고 직접 구현해 봐야겠죠?

다음과 같이 @State로 가능한지 여부를 알 수 있는 isEnabled 변수를 만들어줍니다.

 

 @State private var isEnabled:Bool = false

바디 안은 아래와 같이 텍스트와 버튼이 있고 버튼을 눌렀을 때 가능,불가능 여부를 바꾸고

텍스트에 띄워주도록 했습니다.

 

 var body: some View {
            VStack(alignment: .center, spacing:60) {
                Text(isEnabled ? "가능" : "불가능")
                Button {
                    isEnabled.toggle()
                }
            label: {
                Text(isEnabled ? "불가능":"가능")
            }
            }
        }

실행해보면 아래와 같이 버튼을 누르면 isEnabled 가 바뀌고 버튼과 텍스트의 글씨가 isEnabled의 값에 따라 바뀌는 것을 볼 수 있습니다.

 

여기서 저는 의문점이 들었는데요.

 

"아니 그냥 @State 안쓰고 변수로 선언해서 쓰면 되는거 아닌가? 🤔"

 

아래와 같이 isEnabled를 그냥 변수로 선언했습니다.

 

 var isEnabled:Bool = false

그랬더니 변수의 값을 바꾸는 부분에서 "Cannot use mutating member on immutable value: 'self' is immutable" 라는 오류가

발생했습니다.

 

해석해보니 "self는 변할 수 없는 것이기 때문에 지금 이 변할 수 있는 멤버는 사용할 수 없어!" 라고 합니다.

Swift는 mutating으로 선언되지 않은 연산 프로퍼티 구조체 내부에서 값 변경이 불가합니다.

 

"그러면 mutating으로 선언하면 되는거 아닌가? 🤔"

 

여기서 self는 View 프로토콜을 채택한 ContentView죠?

View의 내부를 살펴보면 body가 { get } 으로 되어있는 것을 볼 수 있습니다.

 

public protocol View {
    associatedtype Body : View
    @ViewBuilder var body: Self.Body { get }
}

즉, mutating으로 바꿀 수가 없습니다.

고로 상태를 변경하기 위해선 @State를 이용해야 합니다.

 

"$는 언제 쓰는거야? 🤔"

 

$는 아래와 같이 Binding을 파라미터로 가지고 있는 View들과 바인딩 하여 사용할 수 있습니다.

 

 

여기서 바인딩은 @State 그 자체가 읽을 수도 있고 쓸 수도 있게끔 하는 것인데요.

 

위에서 버튼을 누르면 isEnabled를 toggle하여 상태를 바꿔주고 Text를 상태값에 따라 바꿔주었습니다.

 

이제 $을 사용해서 아래와 같이 Toggle과 바인딩 시켜주겠습니다.

 

	Toggle(isOn:$isEnabled) {
            Text(isEnabled ? "가능" : "불가능")
        }

 

토글값과 isEnabled가 바인딩 되었기 때문에 토글값에 따라 텍스트가 바뀌는 것을 볼 수 있습니다.

 

 

 

 

---

Reference

 

Apple Developer Documentation