SwiftUI에서 많이 하는 실수 - Preview에서 실제와 다른 상태를 구성해 놓고 디버깅이 꼬이는 실수

SwiftUI에서 많이 하는 실수 - Preview에서 실제와 다른 상태를 구성해 놓고 디버깅이 꼬이는 실수

 

SwiftUI Preview는 매우 강력한 도구이지만,
실제 런타임 환경과 다른 상태/의존성으로 구성해 두면
“Preview에선 되는데 실제 앱에선 안 되는” 이상한 상황이 자주 발생합니다.

---

1. 문제 원인

• Preview에서 ViewModel/EnvironmentObject/DI를 제대로 주입하지 않음
• 실제에선 NavigationStack 안에 있는데 Preview는 단독 View만 띄움
• Feature Flag / 설정값 등을 실제와 다르게 설정

---

2. 나타나는 증상

• Preview에서는 UI가 정상인데, 앱에선 크래시
• EnvironmentObject 누락 에러가 Preview에서만 발생하거나, 반대로 실제만 발생
• 네트워크/권한 등이 필요한 화면에서 Preview가 전혀 도움이 안 됨

---

3. 잘못된 코드 예시

struct HomeView: View {
    @EnvironmentObject var store: AppStore

    var body: some View {
        Text(store.username)
    }
}

#Preview {
    // ❌ EnvironmentObject 주입 없이 바로 사용
    HomeView()
}

또는 DI가 필요한 ViewModel을 강제로 초기화:

#Preview {
    DetailView(viewModel: DetailViewModel(realDependency: RealService()))
}

• 테스트/미리보기 용이 아닌 실제 의존성을 사용

---

4. 올바른 코드 예시

4-1. Preview 전용 Mock 주입

final class MockAppStore: AppStore {
    override init() {
        super.init()
        self.username = "미리보기 유저"
    }
}

#Preview {
    HomeView()
        .environmentObject(MockAppStore())
}

4-2. DI Container / Composition Root 재사용

실제 앱 구성과 동일한 DI를 Preview에서도 재사용하는 패턴:

struct AppContainer {
    let store = AppStore()
    let cardsViewModel = CardsViewModel(...)
}

extension AppContainer {
    static var preview: AppContainer {
        let container = AppContainer()
        // preview용 데이터 주입
        return container
    }
}

#Preview {
    let container = AppContainer.preview
    HomeView()
        .environmentObject(container.store)
}

---

5. 정리 및 팁

• Preview는 “실제 앱에서 이 화면이 어떤 의존성을 받는지” 그대로 반영하는 것이 중요합니다.
• 최소한
  • EnvironmentObject
  • NavigationStack/TabView 구조
  • 주요 설정/locale/색상 scheme 정도는 실제와 최대한 비슷하게 맞춰 주는 습관이 필요합니다.