TIL: Swift UI (1) 2025.06.20

스위프트 기초를 끝내고 Swift UI를 이용해 간단한 앱을 만들어보려고한다.

프로젝트 만드는 방법보다는 Swift UI의 구문이나 키워드를 주로 작성할 예정

Stack

Stack은 SwiftUI에서 레이아웃을 잡을때 사용하는 컨테이너 뷰이다.

JS에서 레이아웃을 위해 display: flex, flex-direction: column 등을 많이 사용해봤을텐데 상황에 맞게 이미 정의가 되어있다고 생각하면 된다.

HStack, VStack, ZStack 이렇게 3가지를 사용해봤다.

그 밖에도 이렇게 많은 컨테이너뷰가 있지만 오늘은 3가지에 대해서만 정리해보겠다.

HStack

Horizontal Stack
말 그대로 수평 방향으로 뷰를 나열한다.

HStack {
	Text("안녕하세요.")
}
// Z, V스택도 마찬가지

주요 옵션으로는

.spacing(_:) // 요소 간 세로 간격

.alignment(.top, .center, .bottom) // 정렬 기준

VStack

Vertical Stack
이건 수직이다.

HStack {
	Text("안녕하세요.")
}
// Z, V스택도 마찬가지

주요 옵션으로는

.spacing(_:) // 요소 간 세로 간격

.alignment(.leading, .center, .trailing) // 정렬 기준

ZStack

Depth Stack
뷰들을 겹쳐서 쌓을 수 있다. div에 z-index 줬다고 생각하면 편하다.

다만 z-index는 값에 따라 누가 더 위에 오는가가 정해지는데 ZStack는 코드 순서에 따라 정해진다.

ZStack {
	Image("배경") // 1
  	Text("제목") // 2
  	Circle() // 3
}

주요 옵션은

.alignment(.topLeading, .center) // 겹친 뷰들의 정렬 기준

Text

String을 표시하기 위한 기본 뷰
단순 텍스트 출력부터 폰트, 컬러, 스타일지정, 레이아웃까지 유연하게 사용 가능

// 기본 사용법
Text("Hello, SwiftUI")

// 스타일링
Text("Styling")
	.font(.system(size: 24)) // 글자 크기 설정
	.foregroundColor(.white) // 글자 색 설정
	.bold() // 볼드
	.italic() // 이탤릭
	.underline() // 밑줄
	.lineSpacing(10) // 줄간격
	.multilineTextAlignment(.leading) // 왼쪽 정렬


// 레이아웃
Text("Layout")
	.lineLimit(1) // string 줄 수 제한
	.truncationMode(.tail) // 앞뒤 생략
	.minimumScaleFactor(0.5) // 뷰포트 작아질 시 줄어들 수 있는 최소 비율


// 텍스트 조합
Text("Hello, ") +
Text("SwiftUI")
	.bold()
	.foregroundColor(.red).bold()


// Localized Text
Text("greeting") // Localizable.strings에 정의된 key값


// 텍스트 바인딩
@State private var name = "Kyusang"

Text("Hello, \(name)")


// 숫자 포맷
let number = 1234.56
Text(number, format: .number.precision(.fractionLength(2)))
// -> 1,234.56


// 날짜 포맷
let now = Dat()
Text(now, style: .time)
// -> 오후 2:45