버튼 동작하게하기

목표

오늘은 버튼을 눌렀을 때, 실제로 동작하게 만들어 봅시다.

사전지식

@State, Button

자가진단 테스트

Q1. 상태를 관리하는 @State에 대해 알고 있나요?

Q2. 눌러서 동작하는 Button을 만들 수 있나요?

참고자료

앱 화면을 다시 그리기 위한 상태 @State

https://opentutorials.org/course/5028/32030

눌러서 쓰는 Button 사용해보기

https://opentutorials.org/course/5028/32020

완성화면

예제코드

• @State를 이용한 상태 관리
• Button을 이용한 상태 변경

import SwiftUI

struct ContentView: View {
    
    @State private var totalNumber: String = "0"
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            
            VStack {
                Spacer()
                HStack {
                    Spacer()
                    Text(totalNumber)
                        .font(.system(size: 73))
                        .foregroundColor(.white)
                        .padding()
                
                }
                
                HStack {
                    Button {
                        totalNumber = "7"
                    } label: {
                        Text("7")
                            .frame(width: 80, height: 80)
                            .background(Color("NumberButton"))
                            .cornerRadius(40)
                            .foregroundColor(.white)
                            .font(.system(size: 33))
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}