[SwiftUI] SwiftUI로 커스텀 뷰 생성하기

8일 뒤에 돌아온 블로그...🥴

 

 오늘은 내장된 SwiftUI View의 기본 개념과 User Interface 레이아웃을 선언하고, View의 모양과 동작을 수정하는 데 사용되는 구문에 대해 알아보자 !-! (2개의 글로 나눠서 작성할 예정 ! - 뷰 생성, 뷰 수정)

 

---

 

SwiftUI View 란 ?

 SwiftUI에서 뷰는 View 프로토콜을 따르는 구조체로 선언된다. View 프로토콜을 따르도록 하기 위해선 구조체는 body 프로퍼티를 가지고 있어야 하며, 이 body 프로퍼티 안에 뷰가 선언되어야 한다.

 

 SwiftUI에는 사용자 인터페이스를 구축할 때 사용될 수 있는 다양한 뷰(Text Label, Text Field, Menu, Toggle, Layout Manager View, etc.)가 내장되어 있다. 각각의 뷰는 View 프로토콜을 따르는 독립적인 객체다.

 재사용 가능한 뷰 컴포넌트를 캡슐화하는 하위 뷰(예를 들어, 앱 화면에서 로그인을 위한 텍스트 필드와 버튼 등)부터 전체 화면에 대한 UI를 캡슐화한 뷰까지 다양한 영역에 걸쳐 커스텀 뷰를 만들 수 있다. 커스텀 뷰의 크기와 복잡성 또는 커스텀 뷰에 캡슐화된 자식 뷰의 개수와는 관계없이, 하나의 커스텀 뷰는 UI 모양과 동작을 정의하는 하나의 객체일 뿐이다 !!

 

 

뷰 추가하기

 body 프로퍼티에 원하는 뷰를 배치하여 다른 뷰가 추가될 수 있다. 하지만, body 프로퍼티는 단 하나의 뷰를 반환하도록 구성되어 있어 다음 코드처럼 뷰를 추가하면 구문 오류가 발생한다.

struct ContentView: View {
    var body: some View {
    	Text("Hello, World!")
        Text("Goodbye World!") // 유효하지 않은 구조
    }
}

 따라서, 뷰를 추가하기 위해서는 Stack이나 Form 같은 컨테이너 뷰에 뷰들을 배치해야 한다. 그리고 컨테이너에 포함된 여러 뷰를 서로 연결하면 하나의 뷰처럼 간주된다. 즉, 다음의 코드는 유효한 뷰 선언부다.

struct ContentView: View {
    var body: some View {
    	Text("Hello, ") + Text("how") + Text("are you?")
        // Hello, how are you?
    }
}

 위 코드에서 body 프로퍼티의 클로저는 반환 구문이 없다. 왜냐하면, 단일 표현식으로 되어 있기 때문이다. 하지만 다음의 코드와 같이 클로저에 별도의 표현식이 추가되면 return 구문을 추가해야 한다.

struct ContentView: View {
    var body: some View {
    	
        var myString: String = "Welcome to SwiftUI"
        
        return VStack {
    		Text("Hello, World!")
            Text("Goodbye World!")
        }
    }
}

 

애플은 최대한 뷰를 작고 가볍게 하라고 권장한다. 이유는 다음과 같다.

1. 재사용할 수 있는 컴포넌트 생성을 권장
2. 뷰 선언부를 더 쉽게 관리
3. 레이아웃을 더 효율적으로 렌더링

 이때, 뷰를 분리하는 방법은 1. 하위 뷰로 작업하거나 2. 프로퍼티로서의 뷰가 있다. 하위 뷰로 작업하는 것은 ContentView 밖에 새로운 View를 만들어 ContentView에서 새로운 View를 호출하는 것이다.

 프로퍼티로 생성하는 경우는 코드로 살펴보자.

struct ContentView: View {

    // HStack을 carStack이라는 이름의 프로퍼티에 할당
    let carStack = HStack {
    	Text("Car Image")
    	Image(systemName: "car.fill")
    }
    
    var body: some View {
        VStack {
            Text("Main Title")
            	.font(.largeTitle)
            carStack // VStack 레이아웃에서 carStack 참조
        }
    }
}

 

---

 

SwiftUI로 뷰를 생성하는 방법을 알아보았다.

다음 글에서는 생성한 뷰를 변경하는 방법에 대해 다뤄보자.

 

 

 

출처 : Swift 기반의 iOS 프로그래밍