[swift] SwiftUI 뷰의 상태 변화

18 Dec 2023

swift

SwiftUI는 애플의 최신 UI 프레임워크로, UI를 만들고 제어하는 새로운 방식을 제공합니다. SwiftUI는 상태 변화에 대한 뷰의 업데이트 처리를 자동으로 관리하며, 매우 직관적으로 상태를 관리할 수 있습니다. 여기에서는 SwiftUI에서 뷰의 상태 변화를 처리하는 방법에 대해 알아보겠습니다.

@State 속성 래퍼 사용

SwiftUI에서 상태를 관리하기 위해서는 @State 속성 래퍼를 사용합니다. @State 속성은 뷰의 변경 가능한 상태를 저장하고, 해당 상태가 변경될 때마다 뷰를 다시 그리도록 유도합니다.

struct ContentView: View {
    @State private var count: Int = 0
    
    var body: some View {
        Button(action: {
            self.count += 1
        }) {
            Text("Count: \(count)")
        }
    }
}

위 예제에서는 @State 속성 래퍼를 사용하여 count 상태를 선언하고, 버튼을 누를 때마다 count를 증가시키는 동작을 수행합니다.

@Binding 속성 래퍼를 이용한 상태 공유

여러 뷰에서 같은 상태를 공유하고자 할 때는 @Binding 속성 래퍼를 이용합니다. @Binding을 사용하면 여러 뷰에서 동일한 상태를 공유하여 사용할 수 있습니다.

struct DetailView: View {
    @Binding var count: Int
    
    var body: some View {
        Text("Count in detail view: \(count)")
    }
}

struct ContentView: View {
    @State private var count: Int = 0
    
    var body: some View {
        VStack {
            Text("Count: \(count)")
            DetailView(count: $count)
            Button(action: {
                self.count += 1
            }) {
                Text("Increment Count")
            }
        }
    }
}

위의 예제에서 @Binding 속성 래퍼를 사용하여 count 상태를 DetailView와 ContentView 간에 공유합니다.

ObservableObject를 이용한 외부 모델과 연결

SwiftUI 앱에서는 ObservableObject와 함께 외부 데이터 모델을 사용하여 뷰 간에 데이터를 공유하고 업데이트할 수 있습니다. 이를 통해 뷰의 데이터와 UI 표현과의 분리를 할 수 있습니다.

class UserData: ObservableObject {
    @Published var username: String = "Guest"
}

struct ProfileView: View {
    @ObservedObject var userData: UserData
    
    var body: some View {
        Text("Username: \(userData.username)")
    }
}

위의 예제에서는 ObservableObject를 채택한 UserData 모델을 사용하여 프로필 뷰에서 사용자 이름을 표시합니다.

SwiftUI에서는 @State, @Binding, 그리고 ObservableObject와 같은 속성 래퍼들을 통해 상태를 관리하고 상태 변화를 처리할 수 있습니다. 이것은 SwiftUI로 더욱 유연하고 동적인 UI를 구현하는 데 있어 매우 중요한 부분입니다.

@State 속성 래퍼 사용

@Binding 속성 래퍼를 이용한 상태 공유

ObservableObject를 이용한 외부 모델과 연결

참고 자료