안녕하세요. 이번 포스트에서는 스위프트(Swift) 언어를 활용하여 SwiftUI 방식으로 아이폰 앱을 개발하는 방법에 대해 알아보겠습니다. 특히, UITableViewController를 이용하여 할 일 목록을 만드는 플로우를 자세히 설명드릴 예정입니다. SwiftUI와 UIKit의 차이점 및 사용 사례를 비교하며, 실습을 통해 이해를 돕도록 하겠습니다.
1. SwiftUI와 UIKit의 차이점
SwiftUI는 Apple의 새로운 UI 프레임워크로, 더 직관적으로 사용자 인터페이스를 만들 수 있도록 도와줍니다. SwiftUI는 선언적 프로그래밍(declarative programming) 방식을 채택하여 UI를 구성하는 방법이 기존 UIKit과는 다릅니다.
1.1 UI 구성 방식
UIKit에서는 ViewController를 활용하여 각 화면을 관리하고, UIKit의 기본 컴포넌트를 코드 또는 스토리보드에서 직접 연결해야 합니다. 반면, SwiftUI는 ‘뷰’를 상수로 선언하고, 이를 조합하여 화면을 구성할 수 있습니다. 즉, UI의 상태 변화를 손쉽게 관리할 수 있습니다.
1.2 상태 관리
SwiftUI에서는 @State, @Binding, @ObservedObject와 같은 다양한 프로퍼티 래퍼(property wrapper)를 이용하여 상태 관리를 쉽게 할 수 있습니다. 이러한 기능은 UIKit에서는 필요에 따라 Delegate 패턴이나 NotificationCenter와 같은 복잡한 로직을 사용해야 했던 점을 개선한 것입니다.
2. 프로젝트 세팅하기
이제 프로젝트를 설정해 보겠습니다. Xcode를 열고 새로운 iOS 앱 프로젝트를 만듭니다.
2.1 새로운 프로젝트 만들기
- Xcode를 실행하고 ‘Create a new Xcode project’를 선택합니다.
- ‘App’을 선택하고 ‘Next’를 클릭합니다.
- Project Name을 입력하고, Interface는 ‘SwiftUI’, Language는 ‘Swift’를 선택합니다.
- ‘Next’를 클릭한 후, 프로젝트를 저장할 위치를 선택합니다.
3. SwiftUI로 할 일 목록 만들기
이제 SwiftUI를 사용하여 할 일 목록을 만드는 방법을 살펴보겠습니다. 이 단계에서 할 일 목록은 배열로 관리될 예정입니다.
3.1 데이터 모델 만들기
우선 할 일 목록을 위한 데이터 모델을 정의하겠습니다. 아래와 같이 간단한 구조체를 생성합니다.
struct Task: Identifiable {
var id = UUID()
var title: String
var isCompleted: Bool
}
3.2 할 일 목록 배열 추가하기
이제 여러 개의 할 일을 포함하는 배열을 생성합니다.
class TaskStore: ObservableObject {
@Published var tasks: [Task] = []
}
3.3 뷰 만들기
할 일 목록의 뷰는 각 할 일을 표시하는 List 구조체를 사용하여 만들 수 있습니다. 다음과 같이 코드를 작성합니다.
import SwiftUI
struct ContentView: View {
@ObservedObject var taskStore = TaskStore()
var body: some View {
NavigationView {
List {
ForEach(taskStore.tasks) { task in
HStack {
Text(task.title)
Spacer()
if task.isCompleted {
Image(systemName: "checkmark")
}
}
}
}
.navigationBarTitle("할 일 목록")
.navigationBarItems(trailing: Button(action: {
// 할 일 추가 로직
}) {
Image(systemName: "plus")
})
}
}
}
3.4 할 일 추가하기
사용자가 할 일을 추가할 수 있도록 추가 버튼을 구현하겠습니다. 아래와 같이 Alert을 추가하여 사용자로부터 데이터를 입력받습니다.
@State private var showingAddTask = false
@State private var newTaskTitle = ""
Button(action: {
showingAddTask.toggle()
}) {
Image(systemName: "plus")
}
.alert(isPresented: $showingAddTask) {
Alert(title: Text("새 할 일 추가"),
message: Text("할 일 제목을 입력하세요."),
primaryButton: .default(Text("추가")) {
let newTask = Task(title: newTaskTitle, isCompleted: false)
taskStore.tasks.append(newTask)
newTaskTitle = ""
},
secondaryButton: .cancel())
}
.textFieldAlert("할 일 제목", text: $newTaskTitle)
4. UITableViewController를 이용한 할 일 목록 만들기
이제 UIKit을 사용하여 UITableViewController로 같은 기능을 구현해보겠습니다. 프로젝트에 UIKit을 포함시키고 UITableView를 설정하도록 하겠습니다.
4.1 UITableViewController 클래스 생성
class TaskListViewController: UITableViewController {
var tasks: [Task] = []
// viewDidLoad에서 데이터 초기화
override func viewDidLoad() {
super.viewDidLoad()
// 기본 데이터 추가
tasks.append(Task(title: "예제 할 일", isCompleted: false))
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return tasks.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
let task = tasks[indexPath.row]
cell.textLabel?.text = task.title
return cell
}
}
4.2 테이블 뷰 셀 설정
테이블 뷰의 셀을 설정하기 위해 UITableViewCell을 등록하고, delegate와 datasource를 설정합니다.
override func viewDidLoad() {
super.viewDidLoad()
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
}
4.3 할 일 추가하기
SwiftUI 앱에서는 Alert을 사용했듯이, UIKit에서도 UIAlertController를 사용하여 사용자로부터 입력을 받을 수 있습니다.
@objc func addTask() {
let alert = UIAlertController(title: "새 할 일 추가", message: "할 일 제목을 입력하세요.", preferredStyle: .alert)
alert.addTextField()
let addAction = UIAlertAction(title: "추가", style: .default) { [weak self] _ in
guard let title = alert.textFields?.first?.text else { return }
let newTask = Task(title: title, isCompleted: false)
self?.tasks.append(newTask)
self?.tableView.reloadData()
}
alert.addAction(addAction)
alert.addAction(UIAlertAction(title: "취소", style: .cancel))
present(alert, animated: true)
}
5. 결론
이번 포스트에서는 SwiftUI와 UIKit을 이용하여 할 일 목록 앱을 만드는 과정을 살펴보았습니다. SwiftUI는 더 직관적인 UI 구성과 간편한 상태 관리를 통해 개발자에게 많은 편의성을 제공합니다. UIKit과 SwiftUI 모두 각자의 장점이 있으므로, 상황에 맞게 적절한 프레임워크를 선택하여 사용하는 것이 중요합니다.
여기까지 읽어주셔서 감사하며, 추가적인 질문이나 도움이 필요하시면 언제든지 댓글로 남겨주세요.