초기화와 enum으로 재사용 가능한 뷰 만들기

색과 문구만 다른 카드를 매번 새 View로 만들 필요는 없다. 초기화 값으로 차이를 열어 두고, 가능한 상태를 enum으로 제한해 하나의 뷰를 재사용하는 과정을 정리했다.

프로퍼티 기본값

뷰(구조체)의 재사용성을 높이기 위해 title, backgroundColor이라는 변수(프로퍼티)를 생성한다. 생성한 프로퍼티에 기본값을 할당한다.

struct TestView: View {
    
    // 프로퍼티 기본값 할당
    let backgroundColor: Color = .red
    let title: String = "Apple"
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}
struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView() // 인스턴스 생성
    }
}

이니셜라이저 Init

프로퍼티 기본값을 지정하지 않을 경우, 이니셜라이저 init을 이용해 인스턴스가 갖어야 할 초기값을 전달한다. self는 현재의 인스턴스를 가르키므로 self.backgroundColor는 인스턴스 뷰 내부의 let backgroundColor: Color를 가르킨다. SwiftUI에서는 이니셜라이저를 따로 작성하지 않아도 자동으로 초기화가 진행된다.

struct TestView: View {
    
    let backgroundColor: Color
    let title: String
    
    // 이니셜라이저
    init(backgroundColor: Color, title: String) {
        self.backgroundColor = backgroundColor
        self.title = title
    }
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView(backgroundColor: .red, title: "Apple") // 인스턴스를 생성하며 초기값 전달
    }
}

관련 있는 프로퍼티끼리 연관지어서 초기화 할 수 있다.

struct TestView: View {
    
    let backgroundColor: Color
    let title: String
    
    init(title: String) {
        self.title = title
        //title에 따라 backgroundColor 초기화
        if title == "Apple" {
            self.backgroundColor = .red
        } else {
            self.backgroundColor = .orange
        }
    }
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView(title: "Orage") // 인스턴스를 생성하며 초기값 전달
    }
}

열거형 Enum

연관된 프로퍼티끼리 열거형 enum을 활용하여 타입을 정의하고, 제한된 파라미터 내에서 초기화 진행할 수 있다.

struct TestView: View {
    
    let backgroundColor: Color
    let title: String
    
    // 연관된 프로퍼티들의 케이스를 타입으로 지정
    enum Fruit {
        case apple
        case orange
        case grape
    }
    
    init(fruit: Fruit) { // 제한된 파라미터로 초기화 진행
	    // 전달 받은 파라미터에 따라 모든 프로퍼티 초기화
        if fruit == .apple {
            self.title = "Apple"
            self.backgroundColor = .red
        } else if fruit == .orange {
            self.title = "Orange"
            self.backgroundColor = .orange
        } else {
            self.title = "Grape"
            self.backgroundColor = .purple
        }
    }
    
    var body: some View {
        VStack {
            Text(title)
                .font(.largeTitle)
                .foregroundColor(.white)
        }
        .frame(width: 150, height: 150)
        .background(backgroundColor)
        .cornerRadius(30)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
    	VStack {
        	TestView(fruit: .grape) // 인스턴스 생성 후 grape 케이스의 초기화 진행
			TestView(fruit: .apple) // 인스턴스 생성 후 apple 케이스의 초기화 진행
    	}
    }
}