SwiftUI의 State와 Binding 이해하기: 상태 관리 기초

SwiftUI는 선언적 프로그래밍 패러다임을 활용하여 UI를 구현할 수 있는 프레임워크입니다. 이 글에서는 SwiftUI의 State와 Binding의 개념을 살펴보고, 이를 통해 어떻게 상태 관리를 쉽게 할 수 있는지를 알아보겠습니다.

State: 뷰의 상태 관리

State는 SwiftUI에서 뷰의 상태를 관리하는 데 사용됩니다. State는 뷰의 일부가 되고, 상태 변경 시 SwiftUI가 자동으로 화면을 재렌더링 해줍니다. State는 보통 뷰 내부에서만 사용되며, 외부로 노출되지 않습니다.

예제

swift
import SwiftUI

struct CounterView: View {
    @State private var count: Int = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
            }
        }
    }
}

이 예제에서 @State 프로퍼티 래퍼를 사용하여 count 변수를 선언했습니다. 버튼을 클릭하면 count 값이 증가하고, 화면에 업데이트된 값이 표시됩니다.

Binding: 상위 및 하위 뷰 간 상태 공유

Binding은 부모 뷰와 자식 뷰 간에 상태를 주고받을 수 있도록 해줍니다. 이를 통해 데이터의 일관성을 유지하면서도 상태 변경을 직관적으로 처리할 수 있습니다.

예제

다음 예제에서는 부모 뷰와 자식 뷰 간에 Binding을 사용하여 데이터를 주고받습니다.

swift
import SwiftUI

struct ParentView: View {
    @State private var count: Int = 0

    var body: some View {
        VStack {
            Text("Parent Count: \(count)")
            ChildView(count: $count)
        }
    }
}

struct ChildView: View {
    @Binding var count: Int

    var body: some View {
        VStack {
            Text("Child Count: \(count)")
            Button("Increment") {
                count += 1
            }
        }
    }
}

이 예제에서 부모 뷰인 ParentView는 @State로 count 상태를 관리합니다. 자식 뷰인 ChildView는 @Binding을 사용하여 이 상태를 받습니다. 자식 뷰의 버튼을 클릭하면 부모 뷰의 count 상태가 업데이트되며, 이는 두 뷰 모두에서 반영됩니다.

State와 Binding의 동작 원리

State와 Binding은 SwiftUI의 상태 관리 시스템의 핵심입니다. State는 로컬 상태(local state)를 관리하는 데 사용되며, 상태가 변경되면 SwiftUI가 자동으로 관련된 뷰를 업데이트합니다. Binding은 상태의 데이터를 두 개 이상의 뷰 간에 공유할 수 있도록 합니다. 이를 통해 복잡한 상태 관리가 필요한 경우에도 코드의 간결성과 명확성을 유지할 수 있습니다.

State 예제 확장

State를 활용하면 다양한 UI 요소를 만드는 것도 가능합니다. 다음은 State를 이용하여 간단한 슬라이더와 텍스트를 만들고 상태를 동기화하는 방법입니다.

swift
import SwiftUI

struct SliderExampleView: View {
    @State private var sliderValue: Double = 50.0

    var body: some View {
        VStack {
            Text("Slider Value: \(sliderValue, specifier: "%.1f")")
            Slider(value: $sliderValue, in: 0...100)
        }
    }
}

이 예제에서 슬라이더 값을 변경하면 화면에 보이는 텍스트도 함께 업데이트됩니다. 이는 @State와 프로퍼티 래퍼의 동작 덕분입니다.

Binding 예제 확장

Binding을 활용하면 자식 뷰에서 부모 뷰의 상태를 변경할 수도 있습니다. 다음은 여러 자식 뷰가 부모 뷰의 상태를 공유하는 예제입니다.

swift
import SwiftUI

struct MultiChildParentView: View {
    @State private var sharedValue: Int = 0

    var body: some View {
        VStack {
            Text("Shared Value: \(sharedValue)")
            ChildIncrementView(sharedValue: $sharedValue)
            ChildDecrementView(sharedValue: $sharedValue)
        }
    }
}

struct ChildIncrementView: View {
    @Binding var sharedValue: Int

    var body: some View {
        Button("Increment") {
            sharedValue += 1
        }
    }
}

struct ChildDecrementView: View {
    @Binding var sharedValue: Int

    var body: some View {
        Button("Decrement") {
            sharedValue -= 1
        }
    }
}

이 예제에서 MultiChildParentView는 sharedValue 상태를 관리하고, ChildIncrementView와 ChildDecrementView는 이를 Binding을 통해 공유합니다. 각 자식 뷰는 상태를 독립적으로 변경할 수 있으며, 변경된 상태는 부모 뷰와 다른 자식 뷰에 모두 반영됩니다.

결론

State와 Binding은 SwiftUI의 기본적인 상태 관리 도구로서 매우 강력합니다. State는 뷰의 로컬 상태를 관리하고, Binding은 부모와 자식 뷰 간 상태를 공유합니다. 이 두 개념을 잘 이해하고 활용하면 복잡한 UI 상태 관리도 손쉽게 처리할 수 있습니다.