[SwiftUI] SwiftUI 맛보기 + (VStack, HStack, ZStack)

 

 

 

요즘 선언형 UI는 어딜 가도 볼 수 있게 되었습니다.

Android - Jetpack Compose / iOS - Swift UI / Flutter - Dart

그만큼 대세중 대세라는 것이겠죠?

 

저는 Jetpack Compose와 Flutter은 간단하게 경험해 봤습니다.

그렇기 때문에 SwiftUI도 참을 수 없죠!

 

Xcode에서 새로운 프로젝트를 생성하면 아래와 같은 화면을 볼 수 있습니다.

 

 

이 형태를 보니 Jetpack Compose와 비슷한 형태라고 생각됩니다.

Android Jetpack Compose 맛보기

 

SwiftUI의 #Preview는

Jetpack Compose의 @Preview와 같이 단순하게 프로젝트 안에서 프리뷰에 UI를 띄워주는 역할을 하겠군요

 

 

 

SwiftUI 역시 Hot Reload를 지원하는 걸 알 수 있습니다.

이제 놀랍지도 않습니다.

이로써 Compose, Flutter, SwiftUI 모두 Hot Reload라는 공통점이 생겼네요

 

위의 모습처럼 우측 설정에서 Text View의 text 또는 font를 변경하면

좌측 소스 코드가 자동으로 변경되면서

Hot Reload를 적용시켜 Preview 역시 실시간으로 변경되는 걸 확인할 수 있습니다.

 

---

 

이렇게 맛보기가 끝나면 아쉬우니

SwiftUI Stack View에 대해서 조금 더 살펴보겠습니다.

 

 

VStack

 

우선 프로젝트를 생성하면 VStack이 세팅되어 있으니

VStack부터 살펴보겠습니다.

 

 

간단하게 VStack 안에 Text View를 위치시켜봤습니다.

딱 보자마자 어떤 부분이 신경 쓰이시나요?

 

저는 두 가지가 신경 쓰이네요

 

첫째는 정렬입니다.

아무 세팅 없이 세로 방향 기준으로 중앙 정렬되어 있네요.

 

두 번째는 아무 세팅 없이 Text들 사이의 아주 미세한 빈 공간이 존재하네요.

 

우선 정렬에 대한 부분부터 살펴보겠습니다.

 

VStack(alignment: ) 속성을 활용하여 변경이 가능했습니다.

 

 

다음은 사이 공간에 대하여 살펴보겠습니다.

 

사이 공간은 VStack(spacing: ) 속성이 존재하네요!

 

 

 

HStack

 

HStack도 VStack와 비슷합니다.

Child View의 방향이 다르고

 

alignment 정렬에 대한 속성값이 다릅니다.

각각 알맞은 정렬값을 사용해야겠네요!

 

 

HStack도 간단하게 보여드리겠습니다.

 

 

 

 

 

ZStack

 

이 친구는 조금 독특합니다.

 

ZStack 또한 다른 alignment 정렬값을 가지고 있습니다.

 

 

 

---

여기까지 저의 긴 글을 읽어주셔서 감사합니다.

제가 습관적으로 코딩을 하는 그날까지 습관적으로 코딩을 하기 위해 글 작성을 꾸준하게 해보겠습니다.