[SwiftUI] SwiftUI에서 텍스트(Text)란?

안녕하세요, HoonIOS입니다. :)

UIKit에서 사용하는 UILabel을 SwiftUI에서는 Text로 역할을 한다고 합니다. 

근데 그렇다고 UILabel처럼 단순히 문자열만 표현하는 뷰가 아닙니다.

 

어떻게 다를까요?

 

UILabel과 Text의 차이점은?

UILabel은 단순히 단어 그대로 문자열을 화면에 표현해주는 역할을 합니다.

 

Text는 단순히 표현만 하는 게 아니라 Button, Toggle, Picker 등등에서 그 UI들을 구성할 때 텍스트를 적용할 때 사용을 합니다.

그만큼 UILabel보다 더 광범위하다고 생각을 하시면 될것 같네요ㅎㅎ

 

Text를 사용하는 방법

Text를 사용해 적용하려면 아래와 같이 Text 수식어를 적용해주면 됩니다.

var body: SomeView {
	Text("이렇게 Text를 적용하면 됩니다.")
}

 

Text에 사용하는 수식어

Text에는 적용할수 있는 여러 가지 수식어들이 있습니다.

 

한번 하나씩 살펴 볼께요

 

수식어	explain
.font(_ font: Font?)	Text를 Font옵션에 해당하는 폰트로 적용하는 수식어 종류) largeTitle, title, headline, body, custom() 등등이 있습니다. 각 종류마다 크기가 다르게 적용됩니다. 적용) .font(.title)
.fontWeight(Font.Weight)	Text의 font 두께를 적용하는 수식어 종류) black, bold, heavy, light, medium, regular, thin 등등이 있습니다. 적용) .fontWeight(.black)
.foregroundColor(Color?)	Text의 글자색을 적용하는 수식어 종류) Color Structure에 해당하는 색깔들 적용) .foregoundColor(Color.red)
.backgroundColor(Color?)	Text 배경색 설정 종류) Color Structure에 해당하는 색깔들 적용) .backgroundColor(Color.blue)
.bold()	Text를 볼드체로 설정
.italic()	Text를 이탤릭체로 설정
.underline()	Text에 밑줄 설정
.strikethough()	Text에 취소선 설정
.lineLimit(int)	Text의 라인수를 최대 지정해준 int까지만 표현하도록 설정
.multilineTextAlightment(TextAlignment)	Text가 다중행일때 문자열의 정렬방식을 설정해주는 작업 적용) .multilineTextAligntment(.leading), .multilineTextAligntment(.trailing)
.trucationMode(_ mode: Text. TruncationMode)	Text의 ...을 중간 끝 앞으로 설정해주는 작업  종류) .trucationMode(.head), .trucationMode(.middle), .trucationMode(.tail)

한 개의 String을 원하는 형태로 문자열을 꾸밀 때 NSAttributedString클래스를 이용하여 원하는 효과를 구현했었었는데 이제는 저 클래스를 이용할 필요 없이 Text를 잘라서 표현해줄 수 있습니다.

 

수식어를 적용할 때 주의해야 할 점

1. 이 수식어는 그 자체 수식어와 뷰 프로토콜이 가진 수식어로 나뉩니다.
이게 무슨 말이냐고요?

bold, foreground, itailic 등의 return 타입이 Text인 반면, trancationMode, linelimit, 등의 return 타입은 some View로 서로 다른 것을 알 수 있습니다.

즉 이 말은 적용하는 순서가 중요한 것을 알 수 있습니다. 

//문제 없음
Text("타입 테스트")
    .font(.title) // return Text
    .bold() // return Text
    .padding() // return View
 
 // 문제 없음
 Text("타입 테스트2")
    .bold() // return Text
    .lineLimts(1) // return View
    .font(.title) // return View - font란 호출자에 따라 반환타입이 다르므로 컴파일 에러 발생하지 않는다.

//컴파일 에러
Text("타입 테스트3")
    .padding() // return View
    .bold() // return Text - 컴파일 에러 발생 Some view타입에는 bold수식어가 없으므로 컴파일 에러가 발생합니다.
    
//컴파일 에러
Text("타입 테스트 4")
    .padding()	// return View
    .font(.large) // return View
    .bold // return Text - 앞 문제와 같이 some View타입에는 bold수식어가 없기 때문에 컴파일 에러가 발생합니다.

 

즉 작업을 할 때는 그 자체 수식어에 관련된 수식어들을 반영해주고 뷰 프로토콜이 가진 수식어를 반영할 수 있도록 순서에 신경을 써줘야 합니다.

 

2. 이전의 뷰를 감싼 새로운 뷰를 만들어내고, 그다음 수식어는 다시 그 뷰를 감싸게 해줘야 합니다.

 

두 개의 코드를 비교해보겠습니다.

//1번
Text("😍😒☺️😊😘").font(.largeTitle)
        .border(Color.red, width: 3)
        .background(Color.blue)
        .padding()

//2번
Text("😍😒☺️😊😘").font(.largeTitle)
        .border(Color.red, width: 3)
        .padding()
        .background(Color.blue)

첫 번째는 background을 먼저 적용하고 padding을 준 반면 두 번째는 padding을 먼저 주고 background을 적용했습니다. 

이 둘의 차이를 한번 확인해보겠습니다.

 

어떤가요 좀 더 확실하게 볼 수 있게 Text에 테두리를 줘서 비교해봤습니다.

단지 적용하는 순서만 변경해줬는데 배경색의 범위가 달라진 것을 확인할 수 있습니다.

 

[1번]

1.  텍스트를 생성
2. 텍스트의 테두리를 빨간색, 5 굵기로 추가
3. 텍스트와 크기가 동일한 파란색 배경 추가
4. padding을 통해 뷰에 여백 추가

[2번]

1. 텍스트를 생성
2. 텍스트의 테두리를 빨간색, 5굵기로 추가
3. padding을 통해 뷰에 여백 추가
4. padding이 적용된 뷰의 크기와 동일한 배경 추가

이렇게 수식어 적용 순서에 따라 적용되는 범위도 달라지는 것을 볼 수 있습니다.

앞으로 구현하실 때 수식 적용 순서도 고려해서 적용해야 하겠죠?

 

다음에는 SwiftUI에서 Image에 대해 살펴보겠습니다 :)