개요

SwiftUI에서 Int나 String같은 데이터를 저장하기 위해서 사용하는게 상태 프로퍼티이다.

사용은 View 구조체 안에 저장 프로퍼티 앞에 @State 라는 프로퍼티 래퍼를 붙여서 표현해 준다.

더 정확히 알고자 한다면 프로퍼티에 대해서 알아보고 오자.

설명

@State, 상태 프로퍼티

앞서 말한것 처럼 상태 프로퍼티는 뷰 구조체에서 내부 데이터를 표시 하기 위한 프로퍼티를 말한다.

SwiftUI에서 이 상태 프로퍼티가 변경되면 그 프로퍼티가 소속된 뷰 계층을 다시 렌더링해야 한다는 신호를 나타낸다.

코드를 살펴보자

import SwiftUI

struct ContentView: View {
    @State private var hello: String = "Hello, World!"
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text(hello)
            
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

여기서 상태 프로퍼티의 경우 해당 뷰에 속한 값이기에 기본적으로 private로 선언하는 것을 권장한다.(private 아니어도 동작은 함)

상태 프로퍼티는 그 이름에 걸맞게 뷰 내부에 상태를 저장하는 기능을 수행하므로 당연히 수정도 가능하다.

상태 프로퍼티를 수정하는것을 바인딩 이라고 한다. 이때 변수 이름앞에 $을 붙여서 프로퍼티에 접근해야 한다.

import SwiftUI

struct ContentView: View {
    @State private var hello: String = "Hello, World!"
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text(hello)
            
            Divider()
            
            //상태 프로퍼티 수정
            TextField("inesrt text", text: $hello)
            
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

그리고 상태 프로퍼티에 대해서 주의 해야 될 점은 상태 프로퍼티는 단방향 프로세스 라는것이다.

즉 상위 뷰의 상태 프로퍼티가 변화되면 상위 뷰의 상태 프로퍼티를 사용하는 하위 뷰또한 다시 렌더링 된다.

@Binding, State바인딩

상태 프로퍼티를 사용해서 하위 뷰에서도 참조하고 접근하고 싶을때 사용한다.

바인딩 하기 위해서 하위 뷰에서 @Binding을 프로퍼티 앞에 붙여주고 상위뷰에선 하위 뷰를 호출할때 ()괄호 안에 상태 프로퍼티를 넣어서 호출하면 된다.

말로 하면 복잡한데 코드로 보면 간단하다 다음 코드를 보자

import SwiftUI

struct ContentView: View {
    @State private var hello: String = "Hello, World!"
    
    var body: some View {
        VStack {
            Text("MainView: \(hello)")
            Divider()
            TextField("inesrt text", text: $hello)
        }
        .padding()
        
        SubView(hello: $hello)  //하위 뷰 호출
    }
}

struct SubView: View{
    @Binding var hello: String  //state 바인딩
    
    var body: some View{
        VStack{
            Text("SubView: \(hello)")
            Divider()
            TextField("inesrt text", text: $hello)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

다음과 같이 사용하면 된다.

주의 할점은 하위 뷰를 호출할때도 SubView(hello: $hello) 처럼 $달러기호를 이용해서 바인딩 해줘야 한다는 점이다.

정리

SwiftUI에서 상태를 저장하고 참조 할 수 있는 수단인 상태 프로퍼티와 상태 프로퍼티에 접근하는 방법인 바인딩에 대해서 다뤘다.