앱을 만들 때, 데이터는 필수요소다. 어떤 앱이든 보여줄 정보가 있어야 하기 때문이다.
따라서 앱을 만들면 데이터를 저장하고, 처리하는 과정이 반드시 필요하다.
특히나 데이터와 UI의 상태를 일치시키는 것은 아주 아주 중요하다.
📲 데이터와 UI의 상태를 일치시키는 것의 중요성
웹툰 앱을 생각해보자.
데이터는 바뀌었는데 UI는 바뀌지 않는다면 다음과 같은 일이 벌어질 것이다.
- 웹툰을 읽고 별점을 줬는데도 별점 칸이 변하지 않는다.
- 웹툰 데이터를 받아왔는데도 화면에 그려지지 않아 계속해서 무한 로딩만 하고 있다.
- UP표시가 떠있어서 들어가봤는데 새로운 회차의 웹툰이 없다.
아마 이런 웹툰 앱이 있다면 사용자는 작동하지 않는 앱이라고 생각하며 모두 떠나갈 것이다.
우리 개발자들은 사용자들이 떠나가지 않도록 데이터가 변하는 순간을 감지할 장치를 설치해두고, 데이터가 변할때마다 UI를 업데이트 해주도록 꼼꼼히 코드를 작성해주어야 한다.
당연한 작업이다보니 당연하게 구현하고 있지만 상당히 골치 아픈 일이다.
하지만 ✨SwiftUI✨는 이 골치 아픈 일을 대신 해준다.
SwiftUI가 제공해주는 도구만 간단히 사용해주면, 알아서 데이터와 UI를 동기화시켜준다.
생각만 해도 너무 좋아🤭
SwiftUI가 데이터와 UI를 자동으로 동기화하는 방식에 대해 알아보자!
🤔 데이터란 무엇인가?
'SwiftUI는 데이터 드리븐이다, 데이터가 중요하다'라는 말을 많이 듣는다.
“데이터”란 무엇일까?
데이터는 UI를 만드는 모든 정보를 의미한다.
크게 아래와 같이 2가지로 나누어 생각할 수 있다.
- UI의 상태를 나타내는 형태 (e.g.) 토글이 on인지 off인지를 나타내는 상태 데이터
- 모델 데이터
우리는 이 2가지 데이터가 변할 때마다 UI를 업데이트해 둘의 최신 상태를 동기화해줘야한다.
🟦 SwiftUI의 보이지 않는 손, Data Flow
위에서 SwiftUI는 데이터가 변하면 자동으로 UI를 업데이트해준다고 이야기했다.
사실 이렇게 자동으로 업데이트 하기 위해서 우리가 해줘야할 일이 딱 한가지 있다.
바로 Data Flow의 도구를 사용해주는 것!
갑자기 Data Flow라니 무슨 이야기인가 싶겠지만,
Data Flow란 간단히 말하면 데이터와 뷰 사이에서 데이터가 어떤 식으로 흘러 전달되고 사용되는가에 관한 것이다.
SwiftUI가 이 보이지 않는 손인 Data Flow를 활용해 자동으로 뷰를 업데이트 할 수 있도록 어떤 데이터가 변했을 때 뷰를 업데이트하고 싶은지 도구를 통해 알려줘야 한다.
정리해보자면,
- 뷰는 뷰를 그리기 위한 데이터가 필요하다.
- 뷰에서 사용하고 싶은 데이터, 값이 변했을 때 뷰를 업데이트 하고 싶은 데이터에 표시를 해 SwiftUI가 알아챌 수 있도록 해준다.
- 이제 SwiftUI가 뷰와 데이터 사이의 의존 관계를 추적할 수 있게 됐다. 나머진 전부 다 SwiftUI에게 맡기면 된다. 알아서 데이터가 변하면 자동으로 UI를 업데이트해준다!
이렇게 SwiftUI가 알아채도록 표시해주는 도구에는 정말 여러가지가 있다.
- Property
- @State
- ObservableObject
- @ObservedObject
- @Binding
- @StateObject
- @EnvironmentObject
도구들마다 사용 용도가 다르니 다음 글에서는 어떤 도구가 있고, 각 도구를 언제 쓰는 것이 좋을지에 대해 공부해보자!
To be continued...💗
