[SwiftUI] @State 알아보기

SwiftUI를 쓰다 보면 @State를 변수 선언할 때 자주 쓰게 된다. 그렇다면 이 @State는 뭘까? 결론부터 이야기하자면 Property wrapper라고 한다. 속성을 감싼다고? 이게 무슨 뜻이지 또?

Property wrapper?

	@State var number: Int = 0

SwiftUI에서는 변수를 선언할 때 아래와 같이 선언을 하게 된다. number는 var 키워드를 사용하여 변수(variable)로 선언되었고, Int 데이터 타입(data type)을 가지며, 초기값으로 0을 가진다. 그리고 @State는 number라는 속성(property)을 상태(State)로 감싸(wrapping) 준다.

 

Swift에서 속성(property)은 클래스(class), 구조체(struct), 열거형(enum) 등의 타입 내부에 선언된 변수(variable) 또는 상수(constant)를 의미한다.

 

왜 감싸는 건데?

해당 속성을 상태 속성으로 만들어서 변경가능하게 만들어준다. 그리고 변경 사항을 추적하고, 변경을 감지하면 자동으로 View를 업데이트하기 위함이다. 코드로 예시를 들어보자. 아래와 같은 코드가 있다. number의 초기값을 0으로 설정하고 +버튼을 누르면 1을 더하고, -버튼을 누르면 1을 뺀다.

import SwiftUI

struct MyView: View {
    @State var number: Int = 0
    
    var body: some View {
        VStack {
            Text("number : \(number)")
            
            HStack {
                Button("+") { 
                    number += 1
                }
                .buttonStyle(.borderedProminent)
                Button("-") {
                    number -= 1
                }
                .buttonStyle(.bordered)
            }
        }
    }
}

그렇다면 여기서 number의 값이 변경되면 보이는 뷰가 달라지는 것일까? 그렇다!! @State 가 알아서 해준다.

@State를 쓰지 않고 var number: Int = 0 로 선언해 준다면?

Left side of mutating operator isn't mutable: 'self' is immutable 라는 에러문구를 볼 수 있다. 해석해 보면 값을 변경할 수 없다는 것인데 이것은 구조체와 또 관련이 있다. 나중에 다루겠지만 구조체 안에 있는 값은 불변(immutable)하다. 그렇기 때문에 @State로 감싸(wrapping) 주어 속성(property) 값을 변경 가능하게 해주는 것이다. 그리고 View 업데이트도 해주게 된다.

SwiftUI에서는 @Binding, @ObservableObject, @Published 등의 다양한 Property wrapper가 있다. 하나하나 알아보도록 하자.

 

결론

@State 는 값이 변경될 때, 자동으로 뷰를 업데이트 해준다.