How to create and compose custom views

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-and-compose-custom-views]

 

How to create and compose custom views

 

SwiftUI의 핵심 신조(tenets)는 구성하기(composition) 이며, 만은 작은 뷰들을 만들고 그것들을 함께 결합해서 커다란 것을 만들도록 설계되었음을 의미합니다. 이는 대규모로 재사용하는 뷰를 사용할 수 있어, 작업이 줄어듭니다. 작은 하위 뷰들을 결합해서 실시간 오버헤드가 거의 없으므로 자유롭게 사용할 수 있습니다.

 

핵심은 작은 것부터 시작해서 키워나가는 것입니다. 예를들어, 많은 앱들은 다음과 같이 사용자(users)를 작업해야합니다.

struct User {
    var name: String
    var jobTitle: String
    var emailAddress: String
    var profilePicture: String
}

 

앱에서 사용자 프로필 사진에 대한 일관된 설계를 원하는 경우, 둥근 모양으로된 100x100 이미지 뷰를 만들 것입니다.

struct ProfilePicture: View {
    var imageName: String

    var body: some View {
        Image(imageName)
            .resizable()
            .frame(width: 100, height: 100)
            .clipShape(Circle())
    }
}

 

디자이너는 여러분에게 이메일 주소가 유효할때마다 작은 봉투 아이콘에 시각적인 힌트를 보여주어야 한다고 말할 것이므로, 여러분은 EmailAddress 뷰를 만들 수 있습니다.

struct EmailAddress: View {
    var address: String

    var body: some View {
        HStack {
            Image(systemName: "envelope")
            Text(address)
        }
    }
}

 

사용자의 세부내용을 보여주고자 할때, 이름과 직함이 깔끔한 뷰를 만들 수 있고, 다음과 같이 EmailAddress 뷰를 사용해서 이메일 주소로 백업할 수 있습니다.

struct UserDetails: View {
    var user: User

    var body: some View {
        VStack(alignment: .leading) {
            Text(user.name)
                .font(.largeTitle)
                .foregroundColor(.primary)
            Text(user.jobTitle)
                .foregroundColor(.secondary)
            EmailAddress(address: user.emailAddress)
        }
    }
}

 

ProfilePickture 다음에 UserDetails을 넣어 더 큰 뷰를 만들어 사용자에게 하나의 시각적인 표현을 제공할 수 있습니다.

struct UserView: View {
    var user: User

    var body: some View {
        HStack {
            ProfilePicture(imageName: user.profilePicture)
            UserDetails(user: user)
        }
    }
}

 

이 구조체를 사용해서 사용자를 보여주는 몇가지 방법이 있습니다:

• 그들의 사진
• 그들의 이메일 주소
• 그들의 직업 세부사항
• 한번에 모두

더 중요한 것은, 이 모든 작업을 사용할때 메인 컨텐츠 뷰는 사용자가 어떻게 보이는지 또는 어떻게 처리해야 하는지에 대해 걱정할 필요가 없다는 것을 의미합니다 - 모든 작업은 더 작은 뷰로 만들어 집니다.

 

이는 예제의 사용자로 UserView를 만들고 작업할 수 있다는 것을 의미합니다.

struct ContentView: View {
    let user = User(name: "Paul Hudson", jobTitle: "Editor, Hacking with Swift", emailAddress: "paul@hackingwithswift.com", profilePicture: "paul-hudson")

    var body: some View {
        UserView(user: user)
    }
}