[SwiftUI] 데이터 바인딩 - State, Binding, ObservedObject (1)

 

 

 

SwiftUI에선 사용자에게 데이터를 어떻게 보여줘야할까? 🤔

 

 

SwiftUI에서 바인딩하는 데이터 종류는 다양하고 용도가 다 다르다.

바인딩 데이터 종류를 정확히 인지하지 않고 코드를 짜다 보니 매번 구글링하기 바빴다..

덕분에 내 구글창은 보라색으로 가득 가득^^..

 

 

그래서 이번에 한번 간단히 정리하고 가보려고 한다.

 

 

 

 

 

먼저, 단순히 보여주는 용으로 사용하고 싶다면 보통 변수를 선언해 사용하면 된다.

 

 

 

 

 

 

여기서 만약 count 변수를 증가시키고 싶다면 ?

 

 

위와 같이 버튼을 추가해 누를 때마다 count 변수를 증가시키는 코드를 추가해주었는데 에러가 발생하게 된다.

 

그 이유는 SwiftUI의 View 특징과 연관되어있다.

 

View는 struct(구조체)로 되어있다.

즉, 구조체의 특징상 내부 메서드 안에서 자신의 변수를 변경할 수 없는 특징 때문에 에러가 발생하는 것이다.

 

 

 

이 문제를 해결하기 위해 @State 키워드가 만들어졌다.

 

 

 

 

 

 

 

🟠 State

@State는 뷰가 접근 가능하도록 값을 가지고 있는 property wrapper 이다.

변수의 값이 변할 때 view를 다시 계산해서 그려준다.

 

 

 

@State 변수는 해당 view 안에서만 사용되기 때문에 보통 private과 같이 선언한다.

현재 화면의 상태를 잠깐 나타내거나 간단한 view 상태를 나타낼 변수를 선언하는데 적합하다.

 

 

 

 

 

🟡 Binding

@State로 선언된 속성을 다른 뷰에서 사용하려 한다면 변수에 $붙여서 사용한다.

@State의 $는 다른 변수에 연결해주는 역할이다.

 

즉, @Binding은 다른 어딘가에 연결되어 있는 값이다.

해당 값이 변경되면 연결된 모든 값이 변경 된다.

값을 받아와서 쓰기 때문에 값을 지정하지 않고 타입만 지정한다.

 

 

 

 

 

🟢 ObservedObject

@ObservedObject는 대부분 ViewModel을 선언할 때 사용하는 프로퍼티이다.

그리고 이는 ObservableObject 프로토콜을 준수하는 타입에 사용한다.

 

 

응? ViewModel은 뭐고 ObservableObject 프로토콜은 뭘까..

 

 

ViewModel은 MVVM 디자인 패턴의 ViewModel을 말한 것인데

MVVM을 간단히 정리해보면

 

M-V-VM (Model-View-ViewModel)

 

Model : 여러 정보를 담고 있는 모델

ViewModel : 띄우고 싶은 정보만 Model에서 가져오고 View에서 사용자가 업데이트한 정보가 있다면 그것을 Model에 전달 즉, View와 Model사이에서 중간 매개체 역할

View : ViewModel에서 상태가 변하면 그 상태를 단순히 구독하고 있다가 View를 변경하는 역할

 

 

ObservableObject는 말 그대로 Observable, Object -> 관찰가능한, 객체

 

 

그니까 결론은 관찰가능한 객체(ObservableObject)가 변경되면

뷰에 업데이트 시켜주는 프로퍼티가 바로 @ObservedObject 다!! 라고 생각하면 됨!!

 

 

하지만 이 상태로 실행하게 되면 버튼을 눌러도 값이 변하지 않는다는 걸 알 수 있는데,

 

그 이유는

 

우리가 CountViewModel이 ObservableObject 프로토콜을 준수하도록

이렇게 선언해줬단 말이지?

 

ObservableObject 프로토콜을 준수하면 데이터가 변경될 때 마다 뷰에 알리기 위해 objectwillchange라는 publisher를 제공하는데, 이를 사용하면 SwiftUI는 변경이 감지 될 때 뷰를 자동으로 업데이트 할 수 있음

 

이때 데이터가 변경되면 관찰이 가능하도록 @Published 프로퍼티를 사용해주면 된다.

 

 

 

아무튼 @ObservedObject는 ViewModel에서 변경사항이 있어서 뷰를 다시 그릴 수 있도록 해주는 역할!

 

 

위와 같이 @Published 프로퍼티를 같이 사용해주면 count 값이 잘 변경되는 모습을 볼 수 있다.

 

 

 

 

 

 

 

 

 

🗂️ 정리

@State

- 뷰가 접근 가능하도록 값을 가지고 있는 프로퍼티로 변수의 값이 변할 때 view를 다시 계산해서 그려줌

- 해당 view에서만 사용 (보통 private과 같이 선언)

 

@Binding

- @State 선언된 프로퍼티를 다른 뷰에서 사용하고 싶을 때 사용

- 해당 값이 변경되면 연결된 모든 값이 변경됨

- 값을 받아와서 쓰기 때문에 타입만 지정

 

@ObservedObject

- ObservableObject 프로토콜을 준수하는 관찰가능한 객체(ViewModel)가 변경사항이 있을 때 뷰를 다시 그릴 수 있도록 해줌

- 변경되는 데이터는 @Published 프로퍼티와 같이 선언

 

 

 

 

EnvironmentObject랑 StateObject는 다음 포스팅!

[SwiftUI] 데이터 바인딩 - EnvironmentObject, StateObject (2)

 

 

 

 

 

 

 

 

📌 데이터 바인딩 참고 : https://nsios.tistory.com/145

📌 MVVM 참고 : https://velog.io/@jyw3927/SwiftUI-MVVM-%ED%8C%A8%ED%84%B4%EC%97%90-%EB%8C%80%ED%95%B4