맛동산이

SwiftUI) Source of Truth란??? 본문

앱/SwiftUI

SwiftUI) Source of Truth란???

진ddang 2023. 3. 26. 15:26

Source of Truth란???

SwiftUI에서의 Source of Truth란 데이터의 일관성과 정확성을 유지하는 중요한 개념을 의미한다.

SwiftUI앱 내에서 사용자 인터페이스(UI)는 데이터 모델에 바인딩 되어있다.

이말은 기존의 UIKit과 다르게 SwiftUI는 데이터모델인 @State에 UI가 바인딩되어 있기 때문에 UI는 데이터 모델의 변경에 의해서 자동으로 반응하고, 변경된다.

하지만 이렇게 UI를 변경하는 상태가 여러곳에서 복사되고 변경되고 사용되어 진다면, 이는 사용자 경험(UX)의 일관성이나 정확성 유지에 굉장히 취약해 진다. (사이드 이팩트가 발생함)

따라서 SwiftUI에서는 SwiftUI에서는 보통 @State, @Binding, @ObservedObject, @EnvironmentObject 등의 속성 래퍼를 사용하여 데이터 모델을 관리한다.

  • State: 값 유형의 속성에 대한 저장소
  • Binding: 두개의 뷰 간에 데이터를 전달하고 동기화
  • ObservedObject: 관찰가능한 객체를 생성함
  • EnvironmentObject: 앱의 전역 상태를 나타내는데 사용함

이해하기 위한 간단한 예시 코드

예시코드

struct ContentView: View {
    
	  @State private var isDestinationPresented = false
    
    
    var body: some View {
        Text("hi").onTapGesture {
            self.isDestinationPresented.toggle()
        }.sheet(isPresented: $isDestinationPresented) {
            DestinationView(isDestinationPresented: self.$isDestinationPresented)
        }
    }
}
 
struct DestinationView: View {
    @Binding var isDestinationPresented: Bool
    var body: some View {
        NavigationView {
            NavigationLink(destination: AnotherDestinationView(isDestinationPresented: $isDestinationPresented)) {
                Text("where to go")
            }
        }
    }
}

struct AnotherDestinationView: View {
    @Binding var isDestinationPresented: Bool
    var body: some View {
        NavigationView {
            Text("dismiss all").onLongPressGesture {
                self.isDestinationPresented = false
            }
        }
    }
}

코드 설명

ContentView, DestinationView, anotherDestinationView

총 3개의 뷰에서 해당 버튼을 누르면, 서로의 뷰를 호출하도록 설정해두었다.

여기에서 @State를 통해서 하나의 single source of truth가 생성된다.

isDestinationPresented라는 상태를 통해서 처음 content뷰에서 버튼을 눌렀을때, 해당 상태가 toggle로 true가 되고, 이를 통해 DestinationView가 떠오른다.

또한 where to go라는 버튼을 통해서 AnotherDestination으로 가게 되고

여기에서 전달받은 isDestination의 값은 dismiss all 이라는 버튼을 길게 누르면 false가 된다.

이렇게 false가 되면, 처음의 Content뷰의 State가 false가 되기 때문에 sheet isPresented가 false라 전체 뷰가 dismiss되게 된다.

중요한점은 앱 상태가 @State의 isDestination이라는 변수에 담겨져 있으며, 해당 데이터 모델이 변하는것으로 자동적으로 UI가 변경되었다는 점이다.

이를 통해서 최초 ContentView에서 하나의 데이터 모델(source of truth)를 가지고 있고, 이를 다른 하위 뷰들에게 전달해주는 것으로 계속해서 앱의 전역상태를 관리할수 있도록 한것이다.

정리

SwiftUI는 SwiftUI는 데이터모델인 @State에 UI가 바인딩되어 있기 때문에 UI는 데이터 모델의 변경에 의해서 자동으로 반응하고, 변경된다. 그만큼 데이터모델의 관리가 중요한데, 이를 아무곳에서 복사하여 사용하는것이 아닌, 단 하나의 데이터를 다른 뷰들에게 전달하는 것으로 한개의 근간이 되는 데이터만을 사용하는 것으로, 기존의 데이터를 여러곳에서 복사하는 것을 통한 사이드이펙트를 방지할수 있는 방법인 것이다.


참고자료

https://www.youtube.com/watch?v=taoKnvqFy7k 

 

반응형