뷰 모델을 뷰에 바인딩하기
SwiftUI와 Combine으로 뷰 모델을 연결합니다.
뷰 모델을 뷰에 바인딩하기은(는) CoddyKit의 무료 Swift Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Swift Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
ViewModel을 뷰에 연결하기
뷰가 변경 사항에 반응할 때만 ViewModel이 유용합니다. SwiftUI에서는 Combine 기반 속성 래퍼인 @Published, @StateObject, @ObservedObject가 이러한 반응성을 제공합니다.
이들을 함께 사용하면 자동 바인딩이 구성되어 ViewModel이 변경될 때 뷰가 다시 렌더링됩니다.
ObservableObject
SwiftUI가 관찰하려면 ViewModel이 ObservableObject를 준수해야 합니다. 이 프로토콜은 변경이 발생하기 전에 실행되는 objectWillChange 게시자를 제공합니다.
final class CounterViewModel: ObservableObject {
@Published var count: Int = 0
func increment() {
count += 1
}
}@Published 속성
속성에 @Published를 표시하면 값이 설정될 때마다 변경 알림이 자동으로 전송됩니다.
모든 @Published 속성은 객체의 objectWillChange 게시자에 연결되므로, 뷰는 정확히 언제 새로 고쳐야 하는지 알 수 있습니다.
final class SearchViewModel: ObservableObject {
@Published var query: String = ""
@Published var results: [String] = []
}@StateObject
@StateObject는 뷰에 ViewModel을 생성하고 소유하라고 알립니다. SwiftUI는 이를 한 번만 인스턴스화하고 해당 뷰가 다시 렌더링되어도 계속 유지합니다.
ViewModel을 처음 생성하는 뷰에서 @StateObject를 사용합니다.
struct CounterView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
Button("Count: \(viewModel.count)") {
viewModel.increment()
}
}
}@ObservedObject
@ObservedObject는 다른 곳에서 생성되어 전달된 ViewModel에 사용합니다. 뷰는 이를 관찰하지만 수명 주기를 소유하지는 않습니다.
부모로부터 ViewModel을 전달받는 자식 뷰에 사용합니다.
struct BadgeView: View {
@ObservedObject var viewModel: CounterViewModel
var body: some View {
Text("Total: \(viewModel.count)")
}
}StateObject와 ObservedObject 비교
핵심적인 차이는 소유권입니다.
- @StateObject — 뷰가 소유하며 다시 렌더링되어도 유지됩니다.
- @ObservedObject — 외부에서 전달되며 뷰가 소유하지 않습니다.
@StateObject를 사용해야 하는 곳에서 @ObservedObject를 사용하면 객체가 다시 생성되어 부모가 업데이트될 때마다 상태를 잃을 수 있습니다.
ViewModel 전달하기
부모에서 @StateObject를 사용해 ViewModel을 한 번 생성한 다음, 이를 @ObservedObject로 표시하는 자식에게 전달합니다.
struct ParentView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
VStack {
BadgeView(viewModel: viewModel)
Button("Add") { viewModel.increment() }
}
}
}양방향 바인딩
텍스트 필드와 같은 입력에는 양방향 바인딩이 필요합니다. SwiftUI는 래퍼에 $ 접두사를 사용해 @Published 속성에서 바인딩을 생성합니다.
struct SearchView: View {
@StateObject private var viewModel = SearchViewModel()
var body: some View {
TextField("Search", text: $viewModel.query)
}
}UI 상태 구동하기
뷰는 게시된 속성에서 표시할 모든 것을 파생해야 합니다. 로딩 표시기, 오류 배너, 콘텐츠가 모두 ViewModel 상태에서 흘러나옵니다.
final class FeedViewModel: ObservableObject {
enum State { case loading, loaded([String]), error(String) }
@Published var state: State = .loading
}상태에 반응하기
뷰는 ViewModel 상태를 확인해 올바른 UI를 렌더링합니다. 명령형 표시/숨기기 코드 없이 선언적인 매핑만 사용합니다.
struct FeedView: View {
@StateObject var viewModel = FeedViewModel()
var body: some View {
switch viewModel.state {
case .loading: ProgressView()
case .loaded(let items): List(items, id: \.self) { Text($0) }
case .error(let message): Text(message)
}
}
}업데이트를 메인에서 유지하기
SwiftUI에서는 게시된 변경 사항이 메인 스레드에서 발생해야 합니다. 비동기 작업 후 ViewModel이 상태를 업데이트한다면 @MainActor를 표시해 이를 보장합니다.
@MainActor
final class ProfileViewModel: ObservableObject {
@Published var name: String = ""
func load() async {
name = await fetchName()
}
}빠른 확인
바인딩에 대한 이해도를 확인해 보세요.
복습
SwiftUI 바인딩을 사용해 ViewModel을 뷰에 연결했습니다.
- ObservableObject와 @Published가 변경 알림을 전송합니다.
- @StateObject는 ViewModel을 생성하고 소유합니다.
- @ObservedObject는 전달받은 ViewModel을 관찰합니다.
- @MainActor는 비동기 업데이트를 메인 스레드에서 처리하도록 유지합니다.
반응형 바인딩을 적용하면 뷰가 항상 최신 ViewModel 상태를 자동으로 반영합니다.
자주 묻는 질문
“뷰 모델을 뷰에 바인딩하기” 강의는 무료인가요?
네 — “뷰 모델을 뷰에 바인딩하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Swift Academy 강의 전체를 잠금 해제할 수 있습니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“뷰 모델을 뷰에 바인딩하기”에서 뭘 배우나요?
SwiftUI와 Combine으로 뷰 모델을 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Swift Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Swift Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“뷰 모델을 뷰에 바인딩하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Swift Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Swift Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.