SwiftUI로 간단한 To-Do 리스트 앱 만들기

SwiftUI 소개

SwiftUI는 Apple에서 개발한 새로운 UI 킷으로, 간결하고 직관적인 선언형 문법을 통해 iOS, macOS, watchOS, tvOS 앱의 UI를 빠르고 쉽게 구축할 수 있도록 도와줍니다. SwiftUI를 사용하면 훨씬 적은 코드로 더욱 강력하고 유연한 UI를 만들 수 있습니다.

To-Do 리스트 앱 구현하기

1. 프로젝트 생성

• Xcode를 실행하고 새 프로젝트를 생성합니다.
• 템플릿에서 "App"을 선택하고, SwiftUI를 체크합니다.
• 프로젝트 이름과 인터페이스를 설정하고 저장합니다.

2. 모델 정의

struct ToDo: Identifiable, Codable {
    var id = UUID()
    var title: String
    var isCompleted: Bool
}

 

• Identifiable: 리스트에서 각 항목을 고유하게 식별하기 위한 프로토콜입니다.
• Codable: 데이터를 JSON 형식으로 인코딩 및 디코딩하기 위한 프로토콜입니다. 이를 통해 데이터를 저장하고 불러올 수 있습니다.

3. 상태 관리

@State private var toDos: [ToDo] = []

 

• @State: SwiftUI의 상태 관리 속성입니다. 이 변수의 값이 변경되면 화면이 자동으로 업데이트됩니다.

4. 화면 구성

struct ContentView: View {
    @State private var toDos: [ToDo] = []

    var body: some View {
        NavigationView {
            List {
                ForEach(toDos) { todo in
                    HStack {
                        Text(todo.title)
                        Spacer()
                        Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
                    }
                    .onTapGesture {
                        // TODO: 완료 상태 토글
                    }
                }
                .onDelete(perform: deleteItems)
            }
            .navigationTitle("To-Do List")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: addToDo) {
                        Image(systemName: "plus")
                    }
                }
            }
        }
    }

    // ... (삭제, 추가 함수 구현)
}

 

• List: 목록 형식으로 항목들을 표시합니다.
• ForEach: 배열의 각 항목을 반복하여 View를 생성합니다.
• onTapGesture: 항목을 탭했을 때 실행될 동작을 정의합니다.
• onDelete: 스와이프하여 항목을 삭제할 때 실행될 동작을 정의합니다.

5. 기능 구현

• 항목 추가:
  • @State 변수에 새로운 ToDo 구조체를 추가합니다.
  • List를 다시 그려 화면을 업데이트합니다.
• 항목 삭제:
  • onDelete 클로저에서 선택된 항목을 toDos 배열에서 삭제합니다.
• 완료 상태 토글:
  • onTapGesture 클로저에서 해당 항목의 isCompleted 값을 반전시킵니다.

6. 데이터 저장

• UserDefaults를 사용하여 간단하게 데이터를 저장할 수 있습니다.
• Codable 프로토콜을 이용하여 toDos 배열을 JSON으로 인코딩하고 디코딩하여 저장하고 불러옵니다.

추가 기능 구현

• 검색 기능: 검색어를 입력하여 목록을 필터링합니다.
• 날짜별 정렬: 생성 날짜 또는 마감 날짜를 기준으로 목록을 정렬합니다.
• 알림 기능: 지정된 시간에 알림을 보냅니다.
• 카테고리 기능: 할 일을 카테고리별로 분류합니다.
• 클라우드 동기화: iCloud를 이용하여 다른 기기와 데이터를 동기화합니다.

SwiftUI의 장점

• 간결한 코드: 선언형 문법으로 코드를 간결하게 작성할 수 있습니다.
• 실시간 미리보기: 코드를 변경하면 화면이 자동으로 업데이트되어 개발 생산성을 높입니다.
• 다양한 UI 컴포넌트: 기본 제공되는 다양한 UI 컴포넌트를 사용하여 복잡한 UI도 쉽게 구현할 수 있습니다.
• 애니메이션: SwiftUI의 애니메이션 기능을 활용하여 매력적인 UI를 만들 수 있습니다.

결론

SwiftUI를 사용하면 To-Do 리스트 앱뿐만 아니라 다양한 종류의 iOS 앱을 쉽고 빠르게 개발할 수 있습니다. SwiftUI의 강력한 기능과 직관적인 문법을 활용하여 자신만의 멋진 앱을 만들어 보세요.