코드를 10배 더 깔끔하게 만드는 5가지 SwiftUI 팁

Source: Dev.to

1. 재사용 가능한 ViewModifier 만들기

같은 수식자를 반복하는 대신, 커스텀 ViewModifier를 정의하고 뷰 확장(extension)으로 노출합니다.

struct PrimaryButtonStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .cornerRadius(10)
    }
}

extension View {
    func primaryButtonStyle() -> some View {
        modifier(PrimaryButtonStyle())
    }
}

// Usage
Text("Hello")
    .primaryButtonStyle()

2. 단일 사용이라도 서브‑뷰 추출하기

큰 뷰 본문은 빠르게 읽기 어렵습니다. 구별되는 부분을 별도의 View 구조체로 분리하세요.

struct ProfileView: View {
    var body: some View {
        VStack {
            ProfileHeader()
            ProfileStats()
            ProfileActions()
        }
    }
}

3. 조건부 콘텐츠에 @ViewBuilder 사용하기

분기 UI 로직을 @ViewBuilder가 붙은 계산된 프로퍼티나 함수에 캡슐화합니다.

@ViewBuilder
var content: some View {
    if isLoggedIn {
        HomeView()
    } else {
        LoginView()
    }
}

4. 간격 값 중앙 집중화

레이아웃 일관성을 유지하기 위해 간격 상수에 대한 단일 진실 소스를 정의합니다.

enum Spacing {
    static let xs: CGFloat = 4
    static let sm: CGFloat = 8
    static let md: CGFloat = 16
    static let lg: CGFloat = 24
}

VStack(spacing: Spacing.md) {
    Text("Title")
}

5. 포괄적인 프리뷰 제공하기

프리뷰 캔버스에서 다양한 변형을 보여주고, 다크 모드 지원도 포함합니다.

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ButtonView(title: "Normal")
            ButtonView(title: "Dark")
                .preferredColorScheme(.dark)
        }
    }
}

바로 사용할 수 있는 스타터 키트

이러한 패턴을 이미 적용한 프로젝트가 필요하다면 SwiftUI Starter Kit Pro 를 확인해 보세요 — 프로젝트당 수십 시간을 절약할 수 있습니다.