SwiftUI 성능 문제 실전 케이스 (List, Navigation, WebView 최적화)

SwiftUI 성능 문제 실전 케이스 (List, Navigation, WebView 최적화)

SwiftUI는 생산성이 높지만, 조금만 구조가 복잡해지면 성능 문제가 바로 드러납니다.

특히 실무에서는 다음 3가지에서 문제가 많이 발생합니다.

• List / Scroll 성능
• NavigationStack 상태 꼬임
• WKWebView 렌더링 문제

이 글에서는 실제로 많이 발생하는 케이스와 해결 방법을 정리합니다.

---

1. Case 1: List 스크롤 끊김

문제

• 스크롤 시 버벅임
• 프레임 드랍

원인

• Heavy View 포함
• 이미지 로딩 과다
• 불필요한 재렌더링

잘못된 코드

List(items) { item in
    HeavyView(item: item)
}

해결 방법

struct ItemRow: View {
    let item: Item

    var body: some View {
        Text(item.title)
    }
}

List(items) { item in
    ItemRow(item: item)
}

• View 분리
• 이미지 캐싱 사용
• 필요한 부분만 렌더링

---

2. Case 2: NavigationStack push 지연

문제

• 화면 전환 시 딜레이
• push 시 끊김

원인

• Destination View가 무거움
• onAppear에서 API 호출

해결 방법

.navigationDestination(for: Route.self) { route in
    switch route {
    case .detail(let id):
        DetailView(id: id)
            .task {
                await loadData()
            }
    }
}

• View 생성 최소화
• 데이터 로딩 지연 처리

---

3. Case 3: WebView 로딩 지연

문제

• WebView 진입 시 느림
• 깜빡임 발생

원인

• 매번 새 WKWebView 생성
• 쿠키 재설정

해결 방법

class WebViewStore: ObservableObject {
    let webView = WKWebView()
}

@StateObject private var store = WebViewStore()

• WebView 재사용
• 쿠키 한 번만 설정

---

4. Case 4: body 과도 호출

문제

• View가 계속 다시 그려짐

원인

• State 범위 과다
• 불필요한 ObservableObject

해결 방법

• State 최소화
• View 분리
• EquatableView 활용

---

5. Case 5: ScrollView 메모리 증가

문제

• 메모리 계속 증가

원인

• LazyStack 미사용

해결

ScrollView {
    LazyVStack {
        ForEach(items) { item in
            ItemView(item: item)
        }
    }
}

---

6. 성능 최적화 핵심 정리

문제	해결
List 렉	View 분리
Navigation 지연	lazy 로딩
WebView 느림	재사용
body 호출 과다	State 분리
메모리 증가	LazyStack

---

7. 실무 체크리스트

• LazyStack 사용 여부
• State 범위 최소화
• WebView 재사용
• 이미지 캐싱
• View 분리

---

8. 결론

SwiftUI 성능의 핵심은 다음입니다.

불필요한 View 생성과 Layout 계산을 줄이는 것

• State → 최소화
• View → 분리
• Layout → 단순화

이 원칙만 지켜도 대부분의 성능 문제를 해결할 수 있습니다.

---

다음 글에서는 SwiftUI 애니메이션 실무 (버벅임 없이 구현하는 방법)을 다루면 UI 완성도가 크게 올라갑니다.