SwiftUI 기초

1. 도입 (왜 배워야 하는가)

SwiftUI는 Apple이 UI를 선언적으로 작성할 수 있도록 도와주는 프레임워크입니다. 기존의 UIKit와는 달리 SwiftUI는 코드를 통해 UI를 직접적으로 정의하고 수정할 수 있어, 더욱 직관적이고 효율적인 개발 환경을 제공합니다. 실무에서 SwiftUI를 능숙하게 다루는 것은 앱 개발 속도를 크게 향상시키고, 유지보수 또한 용이하게 합니다.

만약 SwiftUI를 배우지 않는다면, 기존의 UIKit에만 의존하게 되어 새로운 기술 트렌드에 뒤처질 수 있으며, 복잡한 UI 구현 시 더 많은 코드와 시간이 소요될 것입니다. 이는 결국 생산성 저하로 이어질 수 있습니다.

2. 핵심 개념 설명

2.1. Declarative Syntax (선언적 문법)

SwiftUI는 선언적 문법을 사용합니다. 즉, "어떻게" 작업을 수행할지를 명시하는 것이 아니라 "무엇"을 원하는지를 명확하게 기술합니다. 이를 통해 코드의 가독성이 높아지고, 수정 및 업데이트가 용이해집니다.

2.2. View (뷰)

View는 사용자에게 보여지는 UI 요소를 의미합니다. SwiftUI에서는 모든 UI 요소가 View로 표현됩니다. 예를 들어, 버튼, 텍스트, 이미지 등이 모두 View입니다.

3. 기본 코드 예제

아래의 코드는 SwiftUI를 사용하여 간단한 텍스트를 화면에 표시하는 예제입니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("안녕하세요, SwiftUI!")
            .font(.largeTitle) // 글씨 크기를 크게 설정
            .padding() // 주변에 여백 추가
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

실행 결과:

• "안녕하세요, SwiftUI!"라는 큰 글씨가 화면에 표시됨.

코드 한 줄씩 동작 설명:

1. import SwiftUI: SwiftUI 프레임워크를 가져옵니다.
2. struct ContentView: View: ContentView라는 구조체를 정의하고, View 프로토콜을 채택합니다.
3. var body: some View: body라는 변수를 정의하며, View를 반환하는 메소드를 구현합니다.
4. Text("안녕하세요, SwiftUI!"): "안녕하세요, SwiftUI!"라는 텍스트를 화면에 표시하는 View를 생성합니다.
5. .font(.largeTitle): 텍스트의 글씨 크기를 크게 설정합니다.
6. .padding(): 텍스트 주변에 여백을 추가하여 UI를 더 보기 좋게 만듭니다.
7. struct ContentView_Previews: ContentView의 미리보기를 위한 구조체를 정의합니다.

4. 실전 활용 예제

4.1. 리스트 구현

쇼핑몰에서 상품 리스트를 보여줄 때, SwiftUI의 List를 사용할 수 있습니다. 데이터 배열을 기반으로 동적으로 리스트를 생성합니다.

import SwiftUI

struct Product: Identifiable {
    var id = UUID()
    var name: String
}

struct ProductListView: View {
    let products = [
        Product(name: "사과"),
        Product(name: "바나나"),
        Product(name: "체리")
    ]
    
    var body: some View {
        List(products) { product in
            Text(product.name)
        }
    }
}

4.2. 버튼 클릭 이벤트

버튼 클릭 시 동작하는 예제입니다. 사용자와의 상호작용을 구현할 때 유용합니다.

struct ButtonExampleView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("클릭 수: \(count)")
            Button("클릭하세요") {
                count += 1
            }
        }
    }
}

5. 흔한 실수와 주의사항

실수 1: State 변수의 잘못된 사용

// 잘못된 코드
var count = 0 // @State 빠짐

8. 상태 변수를 사용하려면 @State를 붙여야 합니다.

실수 2: View의 재사용

// 잘못된 코드
struct ContentView: View {
    var body: some View {
        ContentView() // 재귀 호출 발생
    }
}

9. View를 재귀적으로 호출하면 스택 오버플로우 오류가 발생합니다.

6. 정리

10. SwiftUI는 선언적 문법을 사용하여 UI를 간단하게 구성할 수 있게 해줍니다.
11. View와 Modifier를 활용하여 UI를 효율적으로 관리할 수 있습니다.
12. 실전에서 리스트와 버튼 클릭 처리 같은 기본적인 UI 요소를 자주 사용하게 됩니다.

다음에 학습하면 좋은 주제

13. State와 Binding을 활용한 데이터 흐름 관리
14. SwiftUI에서 애니메이션 적용하기
15. Combine 프레임워크를 통한 비동기 데이터 처리