[SwiftUI] @State 이해하기

SwiftUI를 하다 보면 @State를 많이 사용하게 된다. 왜 @State를 사용하고 어떻게 사용하는지 알아보자.

 

먼저 @State를 사용하는 이유를 보자.

 

프로젝트를 만들면 볼 수 있는 코드이다.

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

여기서 볼 수 있듯이 뷰가 전부 struct로 되어있다. 즉 불변(immutable)이다. 그렇기 때문에 변수의 값을 마음대로 변경할 수 없다.

 

예를 들어 버튼을 누르면 1씩 증가하는 코드를 작성해보자.

import SwiftUI

struct ContentView: View {
    
    var num = 0 
    
    var body: some View {
        VStack{
            Text(String(num))
            Button(action: {num+=1}) {
                Text("Click")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

이렇게 하면 다음과 같은 에러 메세지가 나온다. Left side of mutating operator isn't mutable: 'self' is immutable

오퍼레이터 왼쪽에 있는 값이 immutable이라는 말이다.  아까 말했듯이 struct안에 값은 불변이고 불변인 값을 바꾸려고 하니까 발생하는 에러이다. 

 

이를 해결하기 위해 필요한 게 @State이다.

import SwiftUI

struct ContentView: View {
    
    @State var num = 0
    
    var body: some View {
        VStack{
            Text(String(num))
            Button(action: {num+=1}) {
                Text("Click")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

하지만 @State를 추가하면 또 다른 에러 메세지가 나온다.

Reference to property 'num' in closure requires explicit 'self.' to make capture semantics explicit

 

간단하게 num앞에 self만 추가해주면 된다.

import SwiftUI

struct ContentView: View {
    
    @State var num = 0
    
    var body: some View {
        VStack{
            Text(String(num))
            Button(action: {self.num+=1}) {
                Text("Click")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

이러면 정상적으로 작동하는 것을 확인할 수 있다.

버튼을 누를 때 마다 1씩 증가

 

@State를 사용하는 이유를 다시 정리하자면 struct안에 불변인 값을 바꿔줄 수 있게 해주는 property wrapper이다.

 

이 @State와 같은 다양한 property wrapper들은 SwiftUI를 처음 배울 때 많이 어려울 수 있다. 

하지만 이것들을 잘 사용한다면 훨씬 좋은 코드를 짤 수 있을 것이다.

 

다음에는 @Binding과 함께 @State를 사용하는 것을 해보자.