[SwiftUI] Text

 

 

이번 포스팅에는 SwiftUI에서 사용되는

Text에 대해서 알아보겠다.

 

UILabel 보다 사용성이 훨씬 크고 

UILabel 과 일맥상통 하다고 말하면 뭔가 이해하기 쉬울까

 

그전에 우리가 익숙해 있었던 UIKit와 

SwiftUI 요소들의 비교를 몇개 먼저 해보자면 아래와 같다.

 

Views and Control

UILabel	Text
UITextField	TextField
UITextField의 Secure 설정	SecureField ( TF의 속성을 설정하는게 아닌 새로운 TF 생성 )
UIButton	Button
UIImageView	Image
UISwitch	Toggle
UISlider	Slider
UIStepper ( 이런게 있었네요,, )	Stepper
UIPickerView	Picker(WheelPickerStyle)
UISegmentedControl	Picker(SegmentedPickerStyle)
UIDatePicker	DatePicker
UITextView	X
UIStackView	HStack(가로), VStack(세로)
UIScrollView	ScrollView
UITableView(Plain)	List
UITableView(Grouped)	List(GroupedListStyle)
UICollectionView	X

 

ViewControllers

UIViewController	View
UINavigationController	NavigationView
UITabBarController	TabView
UISplitViewController	NavigationView
UITableViewController	List
UICollectionViewController	X
UIAlertController(actionSheet)	ActionSheet
UIAlertController(alert)	Alert

 

 

그럼 이제 Text에 대해서 살펴보겠다.

 

Text는 저번 포스팅에서 보았듯이 

화면에 원하는 문자열을 표현하는 View이다.

 

SwiftUI에서는 Button, Picker, Toggle 등 다양한 View에서

Text를 사용해야 하는 경우가 많다.

 

이런 Text에는

UIKit에서 Label의 속성을 설정하듯이 

수식어를 적용하여 원하는 설정을 해줄 수 있다.

 

 

var body: some View {
        
        VStack(alignment: .center, spacing: 30, content: {
            Text("폰트 & 굵기")
                .font(.title) // 폰트 설정
                .fontWeight(.black) // 폰트 굵기
            Text("글자색 & 배셩색")
                .foregroundColor(.white) // 글자색
                .padding() // 텍스트 주변 여백 설정
                .background(Color.blue) // bgColor
            Text("커스텀 폰트, 볼드, 이탤릭, 밑줄, 취소선")
                .font(.custom("Menlo", size: 16)) // 커스텀 폰트
                .bold() // 볼드
                .italic() // 이탤릭
                .underline() // 밑줄
                .strikethrough() // 취소선
            
            Text("자간")
                .kerning(8)
                +
                Text("기준선")
                .baselineOffset(8)
        })
        
    }

 

 

 

여기서 한가지 중요한 부분이있다.

수식어를 적용하는데에 있어서 순서에 유의해야 한다.

 

각각의 View는 View 자체가 가진 수식어와

View 프로토콜이 가진 수식어로 나뉜다.

 

동일한 이름을 가지고 있지만

Text에 정의된 수식어는 Text를 return하고 있고,

View 프로토콜에 정의된 수식어는 

some View 타입을 return 하고 있다.

 

 

font -  View 자체가 가진 수식어와 View 프로토콜이 가진 수식어

forefroundColor -  View 자체가 가진 수식어와 View 프로토콜이 가진 수식어

 

 

 

혹은 동일하게 사용할 수 없는 수식어도 있다.

Text에는 bold, italic 수식어를 사용할 수 있다.

하지만 View 프로토콜에는 빠저있으며

반대로 

View 프로토콜에는 padding 수식어를 사용하여 여백을 설정하지만

Text에는 정의되어 있지 않아 사용을 할 수 없다.

 

var body: some View {
        
        VStack(alignment: .center, spacing: 30, content: {
            Text("TEST")
                .bold() // 볼드 - Text에만 있고, View 프로토콜에는 없는 수식어 
                .italic() // 이탤릭 - Text에만 있고, View 프로토콜에는 없는 수식어 
                .padding() // 여백 - Text에는 없지만 View 프로토콜이 사용되는 모든 View에 공통으로 적용되는 수식어
        })
        
    }

 

 

이말은 즉슨  padding은 View를 반환하는 수식어 이므로

padding 이후에 올 수 있는 수식어는 View 프로토콜에 존재하는 수식어로 제한이 된다. ( Text 수식어 사용 못함. )

View 프로토콜은 bold, italic 수식어를 가지고 있지 않기 때문에 사용을 못하게 된다는 것이다.

 

 

 

var body: some View {
        
        VStack(alignment: .center, spacing: 30, content: {
            Text("TEST")
                .padding() // 여백 - Text에는 없지만 View 프로토콜이 사용되는 모든 View에 공통으로 적용되는 수식어
                .bold() // 컴파일 에러
                .italic() // 컴파일 에러
        })
        
    }

 

 

오늘 다룬 내용은 Text 뿐만 아니라 다른 모든 View에 공통으로 적용되는 사항이라고 한다.

그러니 앞으로 수식어 사용 순서에 있어 각별히 신경을 써야겠다.