SwiftUI 2일차 • 버튼을 누르면 'Hello World!'가 튀어나오게 해보자!

안녕하세요 제로데이입니다!

 

오늘할 주제는 제목과 같이 '버튼을 누르면 'Hello World!'가 튀어나오게 해보자!'입니다.

우선 1일차의 마지막 진행을 보면 아래처럼 이렇습니다

 

1일차 화면

 

버튼을 넣어 텍스트를 띄우기전에 개념을 조금 알아야 되는데 코드와 같이 설명해드리겠습니다.

 

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

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

 

우선눈에 두개의 구조체가 눈에 들어옵니다.

struct ContentView: View 와 struct ContentView_Previews: PreviewProvider 인데요.

 

아래에 있는 struct ContentView_Previews: PreviewProvider 를 먼저 보면 이름에서 유추할수 있듯 

콘텐츠 뷰를 먼저 볼수있는 그런 구조체 같은 느낌이 납니다. 그래서 전체 주석을 치게 되면

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

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

사라졌어..?

화면의 1/4을 차지하던 프리뷰가 사라졌습니다. 즉 저 구조체는 상황을 미리 볼수있게 하는 편리한 구조체였네요.

그렇다면 앱을 실행하면 아무것도 안나올까요?..

 

잘 나와..!

아주 잘 나옵니다.

즉 사용자의 편리를 위해 그리고 SwiftUI의 아이덴티티를 위해 존재하는 거였군요.

 

그리고 또 하나인 struct ContentView: View 구조체에서 앱에 직접적인 영향을 주는것 같습니다. 이정도 알아두시고

본론으로 들어가 버튼을 누르면 이벤트를 발생하게 하기 위해서

버튼을 생성해봅시다.

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            //action을 넣을곳.
        }) {
            Text("버튼")
        }
    }
}

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

Button

정상적으로 버튼이 나왔네요.

자 이제 버튼을 누르면 Hello World!가 나오게 해야 되겠죠?

그러기 위해선 제가 주석을 해놓은 'action을 넣을 곳.'에 코드를 넣어야 됩니다.

 

먼저 완성된 코드를 보시고 설명을 해드리겠습니다.

 

import SwiftUI

struct ContentView: View {
    @State var show_message = false
    var body: some View {
        VStack {
            Button(action: {
                self.show_message.toggle()
            }) {
                Text("버튼")
            }
            if show_message {
                Text("Hello World!").font(.system(size: 60))
            }
        }
    }
}

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

 

보시면 생소하실 @State var show_message = false 와 VStack 등 여러가지가 보입니다.

저것에 대한건 다음 글에 자세히 다루겠습니다.

 

지금은 @State var show_message = false는 Bool 타입이라고 보시고 VStack은 위 아래로 정렬해준다 라고 생각하시면 됩니다.

 

우선 제가'action을 넣을 곳.'이라고 주석한 곳을 보시면 

왠 self.show_message.toggle() 이라는 코드가 보입니다.

.toggle()은 실행되면 False 이면 True가 되고 True였다면 False가 되는 코드입니다.

 

그리고 

if show_message {
    Text("Hello World!").font(.system(size: 60))
}

이렇게 따로 뺀 이유가 Button에는 이미 "버튼"이라는 Text가 있는데 중복으로 Text를 넣을수 없기에 밑에 따로 해주었습니다.

 

결과를 보면

GIF

잘 되는 것을 확인하실 수 있습니다!

 

마지막으로 다빈치의 명언을 남기고 글을 마치겠습니다.

 

가장 고귀한 즐거움은 이해의 기쁨이다.  - 레오나르도 다빈치