[iOS] SwiftUI의 상태 관리 (Feat. @State, @StateObject, @ObservedObject, @Published)

출처 : Apple

 

SwiftUI에서 상태 관리에 대해 알아보도록 하죠.

 

먼저 @State, @StateObject, @ObservedObject, @Published는 상태 변화를 관리하고 SwiftUI 뷰와의 데이터 바인딩을 위한 도구입니다. 각 역할을 이해하고 어떤 상황에서 어떤 속성을 사용해야 하는지 정확히 파악해보도록 하겠습니다.

현재 제가 하고 있는 개인 프로젝트와 관련된 예시와 함께 보도록 하겠습니다.

 

 

1. @State

개념

@State 뷰 내부에서만 사용하는 상태를 저장, 관리하는 데 사용됩니다. 주로 간단한 데이터(숫자, 문자열, Bool 등)를 다룰 때 사용됩니다. @State로 선언된 변수는 뷰가 다시 렌더링될 때에도 상태를 유지하며, 상태가 변경되면 자동으로 뷰가 재렌더링됩니다.

 

예시

struct MainView: View {
    @State private var showChatView = false // 상태 변수, ChatView의 보여주는지 여부를 나타낸다.

    var body: some View {
        Button("Show Chat View") {
            showChatView = true
        }
        .fullScreenCover(isPresented: $showChatView) {
            ChatView()
        }
    }
}

 

언제 사용해요?

1. 간단한 상태(숫자, 문자열, Bool)를 관리할 때
2. 상태는 뷰 내에서만 사용되고, 외부에서 공유되지 않도록 해야할 경우

 

정리

@State는 상태가 매우 간단하고, 그 상태가 뷰 내부에서만 사용되는 경우에 적합하다.
뷰가 다시 그려지더라도 상태를 잃지 않고 유지된다.

 

 

2. @StateObject

개념

@StateObejct는 클래스 기반 객체의 상태를 관리하기 위해 사용됩니다. 주로 객체를 처음 생성하고, 해당 객체의 상태를 지속 관리해야 할 때 사용됩니다. 뷰가 재구성되어도 @StateObject로 관리하는 객체는 상태를 유지합니다.

 

예시

class ChatViewModel: ObservableObject {
    @Published var messages: [String] = []
}

struct ChatView: View {
    @StateObject private var viewModel = ChatViewModel() // 객체 생성 및 상태 관리

    var body: some View {
        VStack {
            List(viewModel.messages, id: \.self) { message in
                Text(message)
            }
            Button("Add Message") {
                viewModel.messages.append("New message")
            }
        }
    }
}

 

언제 사용해요?

1. 클래스 기반 객체를 처음 생성하고 그 상태를 관리할 때
2. 해당 객체의 상태를 뷰가 처음부터 끝까지 생명주기를 관리해야 할 때

 

정리

@SateObject는 뷰에 객체를 처음 생성하고 해당 객체를 관리할 때 사용된다.
만약 다른 뷰로 객체를 전달해야 한다면, 전달받은 뷰에서는 @ObservedObject를 사용해 객체를 관찰해야 한다.

 

 

3. @ObservedObject

개념

@ObservedObject는 외부에서 생성된 객체를 상태를 관찰하고, 상태 변화를 뷰에 반영해야 할 때 사용됩니다. 주로 뷰 외부에서 생성된 객체가 상태 변화할 경우, 그 변화를 관찰하고 UI를 업데이트할 때 사용됩니다.

 

예시

class ChatViewModel: ObservableObject {
    @Published var messages: [String] = []
}

struct MainView: View {
    @StateObject private var viewModel = ChatViewModel() // 객체 생성

    var body: some View {
        ChatView(viewModel: viewModel) // 자식 뷰에 전달
    }
}

struct ChatView: View {
    @ObservedObject var viewModel: ChatViewModel // 외부에서 전달받은 객체 관찰

    var body: some View {
        VStack {
            List(viewModel.messages, id: \.self) { message in
                Text(message)
            }
            Button("Add Message") {
                viewModel.messages.append("New message")
            }
        }
    }
}

 

언제 사용해요?

1. 외부에서 생성된 객체를 뷰에서 관찰하고 반영해야 할 때
2. 객체를 다른 뷰로 전달되었을 때

 

정리

@StateObject는 객체를 생성하는 뷰에서 사용하고,
@ObservedObject는 다른 뷰에 전달된 객체를 관찰하는 데 사용된다.
객체의 생명주기 관리가 아니라, 단지 상태 변화를 추적할 때 사용된다.

 

 

4. @Published

개념

@Published는 클래스 내부의 프로퍼티가 변경될 때 그 변화를 자동으로 관찰자에 알리기 위한 속성입니다. 객체의 속성이 바뀌면 그 변화를 관찰하고 있는 모든 뷰에 자동으로 반영됩니다. 주로 ObservableObject와 함께 사용되며, 상태 변경을 뷰에 반영하는 데 사용됩니다.

 

예시

class ChatViewModel: ObservableObject {
    @Published var messages: [String] = [] // 상태 변경을 알림
}

struct ChatView: View {
    @StateObject private var viewModel = ChatViewModel()

    var body: some View {
        VStack {
            List(viewModel.messages, id: \.self) { message in
                Text(message)
            }
            Button("Add Message") {
                viewModel.messages.append("New message") // 상태 변경
            }
        }
    }
}

 

언제 사용해요?

1. ObservableObject 클래스의 속성 변경이 뷰에 반영되어야 할 때
2. 클래스 내부의 상태를 관리하고, 그상태가 다른 뷰에서 관찰되어야 할 때

 

정리

@Published는 주로 객체 내부의 상태 변화를 추적하고,
그 변화를 외부에서 자동으로 반영할 때 사용된다.