SwiftUI - 생성, View 파일의 기본구성

Whale·2022년 6월 14일
0

SwiftUI 기초학습

목록 보기
2/7

뭐가 뭔지 모르지만 시작은 생성부터.


당차게 Swift UI 로 프로젝트를 만들고, 매우 간결한 파일구성에 놀란다.
AppDelegate, info.plist, Launch Screen, Main StoryBoard 다 사라졌다.

프로젝트 이름을 딴 ~~~App 파일이 윈도우의 역할을 하는것같다.
제일 처음 표기되는건 ContentView 라는 SwiftUI 파일.
문법자체가 모조리 생소한데 Hello, World 만이 프리뷰에 덩그라니 떠서 나를 반겼다.
코드구성을 살펴보면 자동생성되는 struct가 2개 있다.

UI작업을 진행하는 코드영역

struct ContentView: View {    
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
    }
}

실제로 작업이 진행되는 body.
여기에 코드로 쭉쭉 컴포넌트를 쌓아나가면 되는듯하다.

  • 아마.. UILabel -> Text 라는거겠지? 익숙하게 써왔던 UIKit 의 컴포넌트들이 다 개명을 한것같다. 이것도 익숙해지려면 한세월...
  • 왜 정렬값이나 프레임, 오토레이아웃을 아무것도 안했는데 중앙에서 존재감을 과시할까?
  • UI작성방법은 다음 포스트에서.

Preview 영역

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

이게 왜 필요할까 고민했는데, 테스트 영역이라는 느낌으로 받아들이니 한결 편해졌다.
예를들어, 프리뷰 영역에서 이것저것 눌러보다가 프리뷰의 Devide -> Fixed 로 변경했더니 프리뷰 영역에 코드가 자동으로 삽입됬다.

실제로 구현하는 부분은 ContentView 의 body. 테스트데이터를 만들어서 _Previews 에 세팅하면 프리뷰 화면엔 그 데이터를 기준으로 표기된다.
데이터를 셋팅하려면 ContentView() 에 인자를 주입하는 방식으로 처리 가능할듯하다.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        let testData: String = "Test Title"
        ContentView(testData)
    }
}

(아마도 이런느낌)

즉, 하나의 뷰 파일에서 뷰의 구성과 테스트 데이터를 모두 짜넣을 수 있고, 테스트데이터를 변경해가며 볼 수 있다. 항상 테스트코드를 어디에 짜야할지 골치아파했던 나에겐 희소식이다.

profile
그저 오래된 iOS 개발자.

0개의 댓글