SwiftUI : #1 ObservedObject '간단한 타이머 만들기'

저번 게시물에서 다뤘던 내용이지만 따로 자세히 알아보도록 하겠습니다.

 

@ObservedObject = 복잡한 프로퍼티(여러 프로퍼티나 메서드가 있거나, 여러 view에서 공유할 수 있는 커스텀 타입이 있는 경우)

• String이나 integer같은 간단한 로컬 프로퍼티 대신 외부 참조 타입을 사용한다는 점을 제외하면 @State와 매우 유사.
• @ObservedObject와 함께 사용하는 타입은 ObservableObject프로토콜을 따라야함.
• @ObservedObject가 데이터가 변경되었음을 view에 알리는 방법은 여러 가지가 있지만 가장 쉬운 방법은@Published 프로퍼티 래퍼를 사용하는 것. = SwiftUI에 view reload를 트리거. 

ObservedObject를 이용해서 간단한 Timer 만들기

Timer을 만들기 위해서 첫 번째로 새로운 Swift파일을 생성하고 이름은 'MyTimer'이라고 정해주겠습니다.

 

그리고 SwiftUI 와 Combine을 import해야합니다.

TIP

 

 

💡Combine??
Combine 프레임 워크는 시간 경과에 따른 값 처리를 위한 선언적 Swift API를 제공합니다. 이러한 값은 여러 종류의 비동기 이벤트를 나타낼 수 있습니다. Combine은 게시자를 선언하여 시간이 지남에 따라 변경될 수 있는 값을 노출하고 구독자는 게시자로부터 해당 값을 받습니다. 예를 들어 텍스트 필드 게시자의 업데이트를 구독하고 텍스트를 사용하여 URL 요청을 수행할 수 있습니다. 그런 다음 다른 게시자를 사용하여 응답을 처리하고이를 사용하여 앱을 업데이트할 수 있습니다. Combine을 채택하면 이벤트 처리 코드를 중앙 집중화하고 중첩된 클로저 및 규칙 기반 콜백과 같은 성가신 기술을 제거하여 코드를 더 쉽게 읽고 유지 관리할 수 ​​있습니다.

class에 Timer을 정해주고 타입은 .observableObject 로 지정해줍니다. 타이머는 타이머 값을 1에서 2, 2에서 3 또는 4로 업데이트하게 됩니다. 그래서 value라는 속성을 생성해야 합니다. 이것은 Int값이 되겠네요 :)

 

.init()을 사용하여 그 아래에 시간이나 기능을 만들어 주겠습니다.

swift

UNFOLDED

//MyTimer View
 
import Foundation
import SwiftUI
import Combine
 
class MyTimer: ObservableObject {
    var value: Int = 0
    
    init() {
                                              //간격        //반복되기때문에 true   //timer을 in 해준다.
        Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { timer in
            self.value += 1
            
        }
    }
}

여기까지 했다면 이제 우리가 원하는 것은 특성 속성 값이(매 초마다) 변경되게 하는 것입니다.

 

즉, ContentView에  "시간이 업데이트됐어! 값을 변경해!"라고 하는 것처럼 말이죠 :)

 

그렇다면 어떻게 해야 할까요?  바로 @Published래퍼를 사용하는 것입니다. 

swift

UNFOLDED

  @Published var value: Int = 0

이제 최신 값을 계속해서 업데이트할 수 있게 되었습니다. 이제 Mytimer를 ContentView에 추가해볼게요

swift

UNFOLDED

//ContentView 
 
import SwiftUI
 
struct ContentView: View {
    
    //@state를 지우고 @ObervedObject로 바꿔줌
    @ObservedObject var myTimer = MyTimer()

성공적으로 MyTimer을 ContentView로 가져왔으니 이제 화면에 타이머를 추가해주겠습니다.

swift

UNFOLDED

struct ContentView: View {
    
    //@state를 지우고 @ObervedObject로 바꿔줌
    @ObservedObject var myTimer = MyTimer()
    
    var body: some View {
        Text("\(self.myTimer.value)")
            .font(.largeTitle)
    }
}

 

 

읽어주셔서 감사합니다🤟

 

 

본 게시글의 전체 코드 GitHub 👇🏻

Seogun95/SwiftUI_ObservedObject_timer_TUT

참고하면 좋은 게시글👇🏻

SwiftUI : @State, @ObservedObject / Struct를 Class로