SwiftUI 화면 구성을 위한 코드스타일

SwiftUI에서 화면을 구성할 때는 명확한 구조와 일관된 데이터 흐름을 유지하는 것이 중요합니다. 다음은 SwiftUI 화면 구성을 위한 베스트 프랙티스입니다.

단일 책임 원칙(Single Responsibility Principle) 적용

SwiftUI의 컴포넌트는 하나의 책임에만 집중하도록 구성하는 것이 좋습니다. 예를 들어 복잡한 UI는 작은 컴포넌트로 분리하여 각각의 뷰가 특정 역할에 집중하게 합니다. 이렇게 하면 뷰를 재사용하기 쉬워지고 유지보수성도 높아집니다.

struct ProfileView: View {
    var body: some View {
        VStack {
            ProfileImageView()
            ProfileInfoView()
            ProfileActionsView()
        }
    }
}

단방향 데이터흐름

데이터 흐름을 단방향으로 유지하여 상태의 일관성을 유지합니다. 뷰 모델(ViewModel)이 ObservableObject로서 데이터를 관리하고 SwiftUI View는 이를 @ObservedObject 또는 @StateObject로 관찰하여 화면을 업데이트합니다. 뷰에서 이벤트가 발생하면 ViewModel로 전달하여 데이터 변경을 처리하는 구조를 유지합니다.

뷰 상태 관리

@State, @StateObject, @ObservedObject, @Binding을 올바르게 사용합니다.

• @State: 뷰 내부에서만 사용하는 상태. 간단한 뷰 전용 상태에 사용합니다.
• @StateObject: 뷰가 객체의 생명 주기를 소유하고 관리해야 할 때 사용합니다.
• @ObservedObject: 외부에서 전달된 객체를 참조하는 경우 사용합니다.
• @Binding: 부모 뷰의 상태를 자식 뷰가 수정할 필요가 있을 때 사용합니다.
  

struct CounterView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack {
            Text("Count: \(viewModel.count)")
            Button("Increment") {
                viewModel.increment()
            }
        }
    }
}

환경 객체(EnvironmentObject) 사용하기

앱 전역에서 필요한 데이터는 EnvironmentObject를 사용하여 여러 뷰에서 공유합니다. 예를 들어 사용자 인증 상태, 설정 정보 등을 앱 전역에서 공유할 수 있습니다.

class UserSettings: ObservableObject {
    @Published var isLoggedIn = false
}

struct ContentView: View {
    @EnvironmentObject var userSettings: UserSettings

    var body: some View {
        if userSettings.isLoggedIn {
            HomeView()
        } else {
            LoginView()
        }
    }
}

뷰 컴포넌트와 로직 분리

뷰와 비즈니스 로직을 분리하여 뷰 모델을 통해 로직을 관리합니다. 뷰는 단순히 UI를 그리는 역할만 하고, 로직은 ViewModel에서 처리하게 합니다. 이렇게 하면 뷰와 로직이 분리되어 코드가 더 깔끔하고 테스트하기 쉬워집니다.

class ProfileViewModel: ObservableObject {
    @Published var userName: String = "John Doe"
    // 데이터 가져오기 및 업데이트 로직
}

struct ProfileView: View {
    @ObservedObject var viewModel: ProfileViewModel

    var body: some View {
        Text(viewModel.userName)
    }
}

미리보기(Preview) 사용하기

SwiftUI는 PreviewProvider를 사용해 미리보기를 제공합니다. 가능한 한 많이 미리보기를 설정하여 다양한 기기와 레이아웃에서 UI가 올바르게 보이는지 확인합니다. Mock 데이터나 Stub 객체를 사용하여 미리보기를 위한 데이터를 제공합니다.

struct ProfileView_Previews: PreviewProvider {
    static var previews: some View {
        ProfileView(viewModel: ProfileViewModel())
            .previewDevice("iPhone 13")
    }
}

레이아웃 구조화

SwiftUI는 VStack, HStack, ZStack을 사용해 간단하게 레이아웃을 구조화할 수 있습니다. 레이아웃을 최대한 명확하게 작성하고 불필요한 중첩을 피하며 Spacer() 등을 활용하여 공간을 적절히 조정합니다.

struct CardView: View {
    var title: String

    var body: some View {
        VStack {
            Text(title)
                .font(.headline)
            Spacer()
            Text("Some description here")
                .font(.subheadline)
        }
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    }
}

수명 주기 관리

데이터 로드나 초기화 작업이 필요할 때 onAppear와 onDisappear를 활용합니다. SwiftUI는 뷰가 화면에 나타나거나 사라질 때 트리거되는 이 메서드를 통해 적절한 시점에 데이터를 로드할 수 있습니다.

struct ContentView: View {
    @StateObject private var viewModel = ContentViewModel()

    var body: some View {
        VStack {
            Text(viewModel.title)
        }
        .onAppear {
            viewModel.loadData()
        }
    }
}