네 저도 이제 SwiftUI를 공부해보려 합니다..
iOS 공부를 시작한지 7개월차가 되었고, 그동안 SwiftUI보다는 기초적인 부분에 신경쓰려고 했었어요.
Storyboard를 활용해본다던가, xib를 활용해본다던가, ConstraintsLayout을 사용해서 코드로 뷰를 구성해본다던가, SnapKit을 사용해본다던가... 그리고 이제 SwiftUI를 슬슬 시작해보기로 마음 먹었습니다 :)
SwiftUI
SwiftUI는 재작년 2019 WWDC에서 발표된 것으로, iOS 13.0 이상부터 사용 가능합니다. 그리고 이 SwiftUI를 사용해서 워치나 위젯을 구현할 수 있게 되었죠!
SwiftUI는 선언적 구문을 사용하기 때문에 사용자 인터페이스의 기능을 명시하기만 하면 되어, 간단한 코드로 Swift의 성능을 사용할 수 있습니다. 예를 들어, TextField로 구성된 항목의 목록을 작성한 다음 각 필드의 정렬, 서체 및 색상을 명시하기만 하면 됩니다. 코드가 정말 간단하고 가독성이 향상되었죠?
SwiftUI 프로젝트의 구조
Xcode에서 SwiftUI를 선택하여 처음 프로젝트를 열어보면, 다음과 같은 파일들을 볼 수 있습니다.
저는 프로젝트 이름으로 testsu라고 써놨기 때문에 testsuApp.swift라는 게 생겼네요.
우리가 기존 방식대로 iOS 프로젝트(iOS 13 기준)를 만들면 AppDelegate.swift와 SceneDelegate.swift가 있었고, SceneDelegate에서 앱의 첫 화면을 결정해서 보여주도록 되어있죠?
같은 방식으로 SwiftUI 프로젝트에서는 testsuApp.swift에서, 정확히는 (프로젝트이름)App.swift에서 앱의 첫 화면을 결정하여 보여줍니다. 아래 코드를 보면 앱이 실행될 때 자동으로 ContentView가 보여지는 것을 알 수 있죠 :)
여기서 ContentView.swift를 열어보면 아래와 같은 화면을 보실 수 있습니다. ContentView 클래스 안에서 화면을 구성하고, ContentView_Previews 클래스를 통해 미리보기가 가능하게 되죠. 여기서 볼 수 있는 SwiftUI의 특성 중 하나가 바로 Preview 기능입니다. 코드를 구현하면서 시뮬레이터로 빌드해보지 않아도, 우리가 작성한 코드가 어떤 화면을 구성하고 있는지 바로바로 확인할 수 있게 됩니다. 가끔 맥북이 왕왕 울 때가 있긴 하지만.. 그래도 편리한 기능인 것 같아요 😀
그리고 아래 코드를 추가해서 Preview에 보이는 디바이스의 종류와 이름을 바꿔줄 수도 있답니다 :)
View 다루기
마지막으로 ContentView의 코드에 여러 컨테이너들을 사용해서 뷰를 구성해보겠습니다. SwiftUI에서 뷰를 어떻게 구현할 수 있는지 살펴보고 게시글을 마치겠습니다 :)
Form
주로 데이터나 설정 등을 다루기 위해 사용하는 컨테이너 입니다.
1. Form에 하나의 Text
2. Form에 10개의 Text
3. Form에 11개 이상의 Text
SwiftUI에서 최상위 View는 최대 10개의 Child View를 가질 수 있기 때문에 Form 안에는 최대 10개의 뷰가 들어갈 수 있습니다. 만약 10개를 초과하는 뷰를 가지게 한다면, 아래와 같이 다른 태그들을 이용하여 감싸주어야 합니다.
NavigationView
기존의 UINavigationController 역할을 하는 컨테이너입니다.
화면에서 보일 뷰를 구성하는 Form을 선언하고, Form 블록 끝에 .navigationBarTitle를 달아 네비게이션 타이틀에 보여줄 String을 인자로 넣어줍니다.
Button
UIButton의 기능을 하는 컨테이너입니다.
Button을 선언하고 { ... } 안에 버튼 클릭시 일어나는 이벤트 내용을 구현하면 됩니다.
Reference
'iOS > SwiftUI + Combine' 카테고리의 다른 글
| [SwiftUI] 양방향 바인딩 (작성중) (0) | 2023.02.24 |
|---|
댓글