SwiftUI / Model data

Minsang Kang·2023년 8월 10일

State binding environment iOS property wrapper swiftui

SwiftUI

목록 보기

8/12

SwiftUI 내에서 UI로 표시하기 위한 Model 들을 어떻게 다뤄야할지 공부하기 위하여 Apple Developer 문서들을 탐방해봤습니다!

Apple Developer 문서에 표현된 SwiftUI / Model data 탐방
https://developer.apple.com/documentation/swiftui/model-data

UPDATE : 2023-10-23 14:50

Model data

앱에서 UI로 표시되는 데이터를 관리

Overview

SwiftUI는 UI 디자인에 대한 선언적 접근 방식을 제공합니다.
View의 계층구조를 구성할 때 View에 대한 데이터 의존성도 같이 표시합니다.
사용자 또는 다른 외부 event가 발생하여 데이터가 변경되면 SwiftUI는 변경된 데이터의 영향을 받는 UI 일부분을 자동으로 업데이트하여 표시합니다.
결과적으로 SwiftUI 프레임워크는 기존 ViewController가 수행하는 대부분의 작업을 자동으로 수행합니다.

OverView 내용이 아주 핵심적이 내용들이 많습니다!

SwiftUI는 선언적 접근 방식입니다.
event가 발생하여 데이터가 변경되면 영항을 받는 UI 부분만 SwiftUI가 자동으로 업데이트하여 표시합니다.
결과적으로 ViewController의 View 업데이트 역할을 SwiftUI가 대신합니다.

SwiftUI 프레임워크는 State와 Binding 도구를 제공하여 앱의 데이터를 UI에 연결합니다.
이러한 도구를 통해 앱 데이터를 단 하나의 source of truth로 관리하여 glue logic의 양을 줄일 수 있습니다!

View 내에서 @State 프로퍼티래퍼를 사용하여 현재 View의 UI와 관련된 내부상태 값(value type)을 관리합니다.

@Binding 프로퍼티래퍼를 사용하여 다른 View의 @State 프로퍼리래퍼를 source of truth로 접근할 수 있습니다.

View 내에서 Observable() 매크로가 적용된 model data를 @State 프로퍼티래퍼를 사용하여 관찰 및 접근할 수 있습니다. (iOS17 이상)

View의 계층 구조 내에서 @Environment 프로퍼티래퍼를 사용하여 model data를 참조값을 전달하는 과정 없이 계층 구조 어디에서든 관찰 가능하게 공유할 수 있습니다.

먼저 source of truth 라는 표현을 이해해볼까요?

Source of truth

쉽게 말하면 단 하나의 원천 데이터를 의미합니다!
데이터의 복사로 인해 생기는 사이드 이팩트를 제거하여 데이터의 일관성과 정확성을 유지하기 위함이라고 생각하면 됩니다!

SwiftUI는 @State 프로퍼티래퍼와 @Binding 프로퍼티래퍼 등의 도구로 단 하나의 원천 데이터인 앱 데이터를 여러 View 내에서 접근가능하도록 제공한다! 라고 이해할 수 있겠습니다~!

그리고 이로인해서 gule logic의 양을 줄일 수 있다는 표현은

데이터를 접근하기 위한 코드

데이터 수정을 위한 코드

데이터 변동이 완료되면 전파하는 코드

데이터 변동을 수신받는 코드

이러한 코드 및 과정들이 있어야 Source of truth 방식으로 데이터를 사용할 수 있겠죠?
이 많은 동작들이 바로 @State, @Binding 프로퍼티래퍼를 붙여서 사용만 하면 자동으로 수행해주기에 수많은 glue logic 양을 줄일 수 있답니다!

Leveraging property wrappers

위에 @State, @Binding, @Environment 등 수 많은 프로퍼티래퍼가 등장했는데, 이 프로퍼티래퍼들을 어떻게 사용할까요?

SwiftUI는 @State, @Binding 과 같이 프로퍼티래퍼(property wrappers)를 통해 데이터 관리를 구현합니다.
property 선언부 앞에 프로퍼티래퍼를 추가하여 적용합니다.
@State private var isVisible = true // Declares isVisible as a state variable.

프로퍼티래퍼를 추가함으로써 property는 데이터 변경사항을 감시하고, 이 변경사항에 영향을 받는 View를 자동으로 업데이트하는 동작을 얻습니다.
if isVisible == true {
    Text("Hello") // Only renders when isVisible is true.
}

또한 property명 앞에 $를 붙여 프로퍼티래퍼의 projected value를 접근할 수 있습니다.
projected value는 single source of truth 형태로 래핑된 property 값에 양방향 Binding을 연결하여 다른 뷰에서 값을 접근하고, 변경할 수 있도록 합니다.
Toggle("Visible", isOn: $isVisible) // The toggle can update the stored value.