SwiftUI에서 많이 하는 실수 - View 중첩이 지나치게 깊어져 가독성과 유지보수가 나빠지는 실수

SwiftUI에서 많이 하는 실수 - View 중첩이 지나치게 깊어져 가독성과 유지보수가 나빠지는 실수

 

SwiftUI는 “작은 View 조합”으로 큰 화면을 만드는 방식을 권장합니다.
하지만 한 View 파일 안에 VStack/HStack/ZStack/If/ForEach를 전부 몰아넣으면
금세 200~300줄짜리 body가 되어, 읽기/수정이 매우 힘들어집니다.

---

1. 문제 원인

• 빠르게 결과를 보기 위해 작은 View로 쪼개는 작업을 미룸
• UIKit 시절의 거대 ViewController 습관을 그대로 유지
• “이 정도는 그냥 한 파일에 있어도 되겠지”가 쌓임

---

2. 나타나는 증상

• body 안에 중첩된 VStack/HStack이 5~6단계 이상
• 스크롤 없이 코드를 한 번에 파악하기 힘듦
• 작은 UI 변경에도 어디를 고쳐야 할지 찾는 데 시간이 오래 걸림

---

3. 잘못된 코드 예시

struct ProfileView: View {
    var body: some View {
        VStack {
            HStack {
                Image("avatar")
                VStack {
                    Text("사용자 이름")
                    Text("상태 메시지")
                }
            }
            .padding()

            Divider()

            VStack(alignment: .leading) {
                Text("최근 활동")
                ForEach(0..<10) { index in
                    HStack {
                        // ...
                    }
                }
            }

            Divider()

            VStack {
                // 설정 관련 UI들...
            }

            // ... 200줄 이상 계속
        }
    }
}

---

4. 올바른 코드 예시 (컴포넌트 분리)

struct ProfileView: View {
    var body: some View {
        VStack(spacing: 16) {
            ProfileHeaderView()
            RecentActivitySection()
            SettingsSection()
        }
        .padding()
    }
}

struct ProfileHeaderView: View {
    var body: some View {
        HStack {
            Image("avatar")
            VStack(alignment: .leading) {
                Text("사용자 이름").font(.headline)
                Text("상태 메시지").font(.subheadline)
            }
        }
    }
}

struct RecentActivitySection: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("최근 활동").font(.headline)
            ForEach(0..<10) { _ in
                ActivityRow()
            }
        }
    }
}

struct ActivityRow: View {
    var body: some View {
        HStack {
            Circle().frame(width: 8, height: 8)
            Text("활동 내용")
            Spacer()
        }
    }
}

---

5. 정리 및 팁

• body가 100줄 가까이 가면 “쪼갤 시점이 온 것”으로 보는 게 좋습니다.
• “논리적으로 하나의 역할을 하는 덩어리”를 기준으로 작은 View로 분리하세요.
• 이 작업은 테스트/미리보기/재사용 측면에서도 큰 이득을 가져옵니다.