[SwiftUI] Hello SwiftUI

 

 

SwiftUI에 대해서 공부를 시작하려고 한다.

"스윗한 SwiftUI" 라는 책을 베이스로 공부하되

추가적으로 필요한 부분이 있을시 검색을 해나가면서 

진행하는 방향으로 공부할 생각이다.

 

 

 

일단 첫 시작이니 프로젝트 생성부터 하겠다.

App을 선택하고

 

 

Interface를 SwifttUI로 선택한다.

 

 

 

그러면 평소 기본으로 위치해있던 ViewController가 아닌

ContentView라는 이름의 swift 파일이 있을것이다.

 

SwiftUI에서는 ViewController를 사용하지 않는다. 대신 

"View 프로토콜을 준수하는 구조체를 사용해서 body라는 프로퍼티에 UI를 구성하는 코드를 작성"

하여 구현 한다고 한다.

 

 

일단 ContentView에 기본으로 작성된 코드를 보면

"Hello, world!"라는 text가 먼저 눈에 띄는데

빌드를 해보겠다.

단축키는 커맨드 & 옵션 & P 이다.

import SwiftUI

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

// 우측에 미리볼수 있는 preView를 위한 코드
struct ContentView_Previews: PreviewProvider { 
    static var previews: some View {
        ContentView()
    }
}

 

그러면 아래와 같이 center에 해당 text를 가지고 있는 label이 위치해있는걸 볼 수 있다.

 

 

그리고 앞서 말했던것처럼

"View 프로토콜을 준수하는 구조체를 사용해서 body라는 프로퍼티에 UI를 구성하는 코드를 작성"

하는 부분을 볼 수 있다.

 

이제 body안의 코드를 수정해보겠다.

기존에 작성되어 있던 padding 다음으로 ( padding이라는 수식어는 padding을 시스템에서 적절히 계산해서 적용시키는 놈인거같다. )

font와 textColor를 바꿀수 있는 수식어를 추가해주겠다.

참고로 SwiftUI는 수식어라고 불리우는 메서드를 연관된 View에 

아래와 같이 추가하는 형태로 View를 꾸민다고 한다.

( 수식어는 기존의 View에 새로운 동작이나 시각적 요소를 가미한 새로운 뷰를 생성 )

 

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .padding()
            .font(.largeTitle)
            .foregroundColor(.red)
    }
}

 

 

우측에 위치한 preView에서 즉각적으로 반응하는 text를 확인할 수 있을것이다.

 

 

 

일단 오늘 처음으로 SwiftUI에 첫 공부를 해봤는데

UIKit에 비해서 SwiftUI를 사용한 작업은 코드량이 상당히 줄어들었다는걸 체감할 수 있었고 

명령 위주의 프로세스인 전자에 비해 선언형 SwfitUI 프로세스가 

조금 낯설기도 했지만 금방 적응 할 수있게 열심히 해봐야겠다는 생각이 들었다.

( 사실 지금 당장은 SwiftUI 너무 좋다 라는 생각밖에 안든다. )