[SwiftUI] Property Wrapper (State, Binding, ObservableObject, EnvironmentObject, Environment)

Property Wrapper

프로퍼티 래퍼는 프로퍼티를 특정 타입으로 감싸서 추가적인 동작이나 기능을 가진 프로퍼티를 선언할 때 사용합니다.

즉, 해당 변수에 추가적인 기능을 붙여주는 문법입니다.

 

아래 다섯 가지 프로퍼티 래퍼에 대해서 공부해보았습니다.

• State
• Binding
• ObservableObject
• EnvironmentObject
• Environment

 

@State

State 프로퍼티 래퍼는 구조체(Struct) 내의 프로퍼티를 수정할 수 있게 도와줍니다.

또한 State로 선언된 변수의 값을 변경했을 때 해당 변수를 가져다 쓴 View가 포함된 body 전체를 다시 그려줍니다.

struct PlayButton: View {
    @State private var isPlaying: Bool = false // Create the state.
    
    var body: some View {
        Button(isPlaying ? "Pause" : "Play") { // Read the state.
		        isPlaying.toggle() // Write the state.
        }
    }
}

 

@Binding를 통해 하위 뷰와 상태 공유

State 프로퍼티 래퍼를 통해 값을 하위 뷰에 전달하면 해당 값이 변경될 때마다 하위 뷰를 업데이트합니다.

하지만 하위 뷰에서는 값을 수정할 수 없습니다. 하위 뷰에서 State를 통한 값을 수정할 수 있도록 하려면 Binding 프로퍼티 래퍼가 필요합니다.

 

Binding을 사용하여 데이터를 저장하는 속성과 데이터를 표시하고 변경하는 뷰 간의 양방향 연결을 만듭니다.

 

상위 뷰인 PlayerView에서 isPlaying이라는 프로퍼티를 State로 선언합니다. 이후 하위 뷰인 PlayButton의 isPlaying와 상태를 공유해주기 위해 Binding을 사용해줍니다.

하위 뷰의 프로퍼티와 공유를 하기 위해서는 $기호를 사용하여 값을 넘겨주어 사용합니다.

struct PlayerView: View {
    @State private var isPlaying: Bool = false // Create the state here now.
    
    var body: some View {
        VStack {
            PlayButton(isPlaying: $isPlaying) // Pass a binding.
        }
    }
}

struct PlayButton: View {
    @Binding var isPlaying: Bool // Play button now receives a binding.
    
    var body: some View {
        Button(isPlaying ? "Pause" : "Play") {
            isPlaying.toggle()
        }
    }
}

 

.constant

변경할 수 없는 고정된 값으로 Binding을 만드는 방법입니다.

상위 뷰로부터 State 변수를 넘겨받기 힘든 Preview에서 주로 사용됩니다.

PlayButton(isPlaying: Binding.constant(true)) // .constant(true) 형태로도 사용 가능

 

ObservableObject

@State는 값 타입의 변수만 감지하기 때문에 참조 타입의 변수는 감지하지 못한다는 단점이 있습니다.

따라서 참조 타입인 Class를 감지하기 위해서는 ObservableObject, @Published, @ObservedObject를 사용하여 하나의 기능을 완성할 수 있습니다.

 

감지되어야 할 클래스에는 ObservableObject 프로토콜을 채택합니다.

해당 클래스 내부에서 감지되어야 할 프로퍼티에는 @Published 프로퍼티 래퍼를 붙여 감지합니다.

해당 클래스의 인스턴스를 생성하기 위해서는 @ObservedObject 프로퍼티 래퍼를 붙여 클래스를 생성합니다.

class NumberCounter: ObservableObject {
    @Published var number: Int = 0
    
    func increaseNumber() {
        number += 1
    }
}

struct ContentView: View {
    @ObservedObject var numberCounter = NumberCounter()
    
    var body: some View {
        VStack {
            Text("\(self.numberCounter.number)")
            
            Button {
                self.numberCounter.increaseNumber()
            } label: {
                Text("Plus One")
            }
        }
    }
}

 

@StateObject

View가 재생성될 때 View안에 선언된 @ObservedObject 또한 재생성됩니다. 따라서 클래스 내에서 감지되고 있던 Published 프로퍼티 래퍼의 변수 값도 초기화됩니다.

 

이를 해결하기 위해서는 @ObservedObject를 @StateObject로 변경하여 View의 재생성과 상관 없이 클래스의 인스턴스가 소멸되거나 재생성되지 않도록 할 수 있습니다.

@StateObject var numberCounter = NumberCounter()

 

만약 상위 뷰와 하위 뷰가 존재하고, 하위 뷰에 @ObservedObject 선언되어 있을 경우에, @StateObject를 사용하지 않고 해결하는 방법은 하위 뷰의 @ObservedObject를 상위 뷰로 옮겨 사용하는 것입니다.

 

상위 뷰에 State 등을 통해 뷰가 재생성되면 하위 뷰도 재생성될 수밖에 없습니다.

아래와 같이 해결하면 NumberCounter의 데이터는 하위 뷰의 바깥에 존재하기 때문에 상위 뷰가 재생성된 것은 아닙니다. 따라서 데이터는 보존되고, 그 데이터를 바탕으로 하위 뷰가 그려질 수 있습니다.

// 상위 뷰
struct ContentView: View {
    @ObservedObject var numberCounter = NumberCounter()
    
    var body: some View {
        VStack {
            SubView(numberCounter: numberCounter)
        }
    }
}

// 하위 뷰
struct SubView: View {
    @ObservedObject var numberCounter: NumberCounter
    
    var body: some View {
        VStack {
            // ...
        }
    }
}

 

@EnvironmentObject

@ObservedObject 또는 @StateObject로 사용하여 클래스 인스턴스를 전달하는 방법을 알아보았습니다.

하지만 여기서 하위 뷰의 하위 뷰, 그리고 그 하위 뷰가 계속해서 생성되고 값을 계속해서 전달해주어야 할 경우에는 @ObservedObject를 반복적으로 사용해주어야 하는 불편함이 존재합니다.

따라서 @ObservedObject는 가까운 하위 뷰에 데이터를 전달하기에 적합합니다.

 

이를 해결하기 위해서 @EnvironmentObject를 사용하여 하위 뷰로 직접 전달하는 것이 아닌 뷰의 environment라는 곳에 저장되어 여러 하위 뷰가 존재해도 같은 계층에만 있다면 EnvironmentObject를 가져다 사용할 수 있습니다.

최상위 뷰에 존재하는 데이터를 하위 뷰 어디서나 사용이 가능하므로 앱 전반에 걸쳐 사용되는 데이터 전달에 적합합니다.

// 상위 뷰
struct ContentView: View {
    @ObservedObject var numberCounter = NumberCounter()
    
    var body: some View {
        VStack {
            SubView()
                .environmentObject(numberCounter)
        }
    }
}

// 하위 뷰
struct SubView: View {
    @EnvironmentObject var numberCounter: NumberCounter
    
    var body: some View {
        VStack {
            // ...
        }
    }
}

 

@Environment

@Environment는 @EnvironmentObject와 동일하게 View의 Environment라는 곳에 저장이 됩니다.

 

ObservableObject 데이터를 직접 Environment에 저장하여 사용하는 @EnvironmentObject와는 다르게 @Environment는 이미 저장되어 있는 값들을 사용합니다.

또한 앱 시스템 전반에 걸쳐 사용되는 설정에 접근할 때 사용하기에 적합합니다.

@Environment(\.colorScheme) var colorScheme