[SwiftUI] Model Data

안녕하세요, iOS 개발하는 루피입니다!

 

오늘은 SwiftUI의 Model Data를 공식 문서를 바탕으로 간단하게 알아보겠습니다.

 

바로 시작합니다.

---

Model Data란?

SwiftUI 앱에서 UI로 표시되는 정보를 관리하는 데이터 구조를 의미합니다. 

이는 사용자가 인터페이스를 통해 상호작용하고 수정할 수 있는 데이터를 표현하는 커스텀 타입입니다.

---

Model Data를 왜 쓰는가?

1. 데이터와 뷰의 분리: 데이터 모델은 데이터와 상호작용하는 뷰와 데이터 자체를 분리합니다.
2. 모듈화 증진: 이러한 분리는 앱의 모듈화에 기여합니다.
3. 테스트 용이성: 데이터 로직을 UI와 분리함으로써 테스트가 더 쉬워집니다.
4. 코드 추론 개선: 앱의 작동 방식을 더 쉽게 이해하고 추론할 수 있게 합니다.

---

Overview

SwiftUI는 선언적 방식으로 UI를 설계합니다. UIKit의 명령형 방식과 달리, 어떻게 UI를 그릴지 절차적으로 작성할 필요 없이 무엇을 보여줄지 정의하면 됩니다.

• 선언적 방식: "이 버튼을 보여줘!"처럼 원하는 결과를 선언하면, SwiftUI가 데이터 변화에 따라 UI를 자동으로 갱신합니다.
• 명령형 방식: "버튼을 추가하고, 클릭 시 색상을 바꿔!"처럼 단계를 직접 코딩해야 합니다.

예를 들어, UIKit에서는 뷰와 데이터를 연결하기 위해 IBOutlet과 IBAction을 수동으로 설정했습니다

@IBOutlet weak var button: UIButton!
@IBAction func buttonTapped(_ sender: UIButton) {
    button.backgroundColor = .blue
}

 

반면, SwiftUI에서는 @State를 사용해 간단히 처리합니다

struct ContentView: View {
    @State private var isTapped = false

    var body: some View {
        Button("Tap me!") {
            isTapped.toggle()
        }
        .background(isTapped ? Color.blue : Color.gray)
    }
}

데이터가 바뀌면 SwiftUI가 자동으로 뷰를 갱신하니, 뷰 갱신 로직을 따로 고민할 필요가 없습니다!

 

SwiftUI는 @State, @Binding 외에도 모델 데이터를 관리하기 위해 @ObservableObject, @EnvironmentObject를 제공합니다.

이를 통해 복잡한 앱에서도 데이터를 한 곳에서 관리하고, 뷰 간 데이터 전달을 간소화할 수 있습니다.

---

단일 진실 원천(Single Source of Truth)

SwiftUI에서 가장 중요한 개념 중 하나는 ’단일 진실 원천(Single Source of Truth)’입니다. 

 

이는 각 데이터가 앱 내에서 단 하나의 원천만을 가져야 한다는 원칙입니다.

• 데이터의 복사본이 아닌 원본 데이터만 존재해야 함
•  데이터 복사로 인한 사이드 이펙트를 제거
• 데이터의 일관성과 정확성을 유지

이 원칙을 통해 데이터 불일치, 버그, 데이터 손상과 같은 문제를 방지할 수 있습니다. 데이터가 변경되면 SwiftUI는 자동으로 해당 데이터에 의존하는 UI 부분을 업데이트합니다.

---

Property Wrappers 활용하기

SwiftUI는 속성 래퍼(Property Wrapper)를 통해 데이터 흐름을 간편하게 관리합니다. 속성 앞에 래퍼를 붙이면 SwiftUI가 데이터 변화를 감지하고, 필요한 뷰만 갱신합니다.

@State

@State는 뷰 내부의 상태 변수를 정의합니다. 

struct ContentView: View {
    @State private var isVisible = true

    var body: some View {
        VStack {
            Text(isVisible ? "보여요!" : "숨겼어요!")
            Button("Toggle") {
                isVisible.toggle() // 상태 변경
            }
        }
    }
}

 

isVisible이 바뀌면 SwiftUI가 뷰를 자동으로 갱신합니다. @State는 토글 상태나 텍스트 입력값 같은 간단한 데이터를 관리할 때 유용합니다.

@Binding

@Binding은 양방향 연결을 제공합니다. 속성 앞에 $를 붙이면 @State의 값을 다른 뷰와 공유할 수 있습니다

struct ToggleView: View {
    @Binding var isOn: Bool // 부모 뷰의 데이터를 참조

    var body: some View {
        Toggle("Visible", isOn: $isOn)
    }
}

struct ContentView: View {
    @State private var isVisible = true

    var body: some View {
        VStack {
            ToggleView(isOn: $isVisible)
            Text(isVisible ? "On" : "Off")
        }
    }
}

 

Toggle로 isVisible을 변경하면, 부모 뷰의 데이터도 즉시 업데이트됩니다.

---

참고

https://developer.apple.com/documentation/swiftui/model-data#Leveraging-property-wrappers

Model data | Apple Developer Documentation

오늘도 화이팅입니다!