SwiftUI 타이머 만들기

SwiftUI 타이머 만들기

---

타이머를 만들려면 @State로 변수를 만들어서 사용해야 한다는 것은 SwiftUI를 조금이라도 경험해본 사람이라면 알 것이다. 그러나 문제점이 한가지 있다. @State로 Int형 변수를 만들어서 -1씩 시켜주면 되는데 1초마다 -1를 시켜주어야 한다는 것이다. 그래서 이번에는 시간이랑 연동시켜서 타이머를 만들어보도록 하겠다.

코드는 다음과 같다.

struct ContentView: View {
    @State private var timeRemaining = 100 // 남은 시간(초)
    let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
  
    var body: some View {
        GeometryReader { gp in
            ZStack(){
                Text("Time: \(timeRemaining)")
                            .font(.largeTitle)
                    .onReceive(timer) { time in
                        if self.timeRemaining > 0 {
                            self.timeRemaining -= 1
                        }
                    }
            }
        }

    }
}

Text로 남은 시간을 표시하도록 하였고 onReceive를 이용하여 timer가 1초마다 새로운 값을 받게 될 때 onReceive가 호출되게 된다. 호출 되면 현재 남은 시간인 timeRemaining 값이 0보다 크면 -1를 하여 1초마다 1 값을 낮추는 작업을 수행하게 된다.

결과물

위와 같이 1초마다 값이 감소하는 것을 볼 수 있다. 상단과 하단탭은 무시해도된다.