[iOS][SwiftUI] 메모장 만들기

안녕하세요.

오늘은 SwiftUI를 이용하여 간단한 메모장을 만들어보도록 하겠습니다.

 

1. 모델 생성

메모장 앱에서는 메모의 제목과 내용이 필요합니다. 이를 저ㅏ장할 수 있는 모델을 생성합니다.

struct Memo: Identifiable {
    let id = UUID()
    var title: String
    var content: String
}

2. 리스트 뷰 생성

메모 리스트를 표시할 뷰를 생성합니다. 이 뷰에서는 'List'와 'ForEach'를 사용하여 메모 리스트를 표시합니다.

struct MemoListView: View {
    @State var memos: [Memo] = []
    
    var body: some View {
        NavigationView {
            List {
                ForEach(memos) { memo in
                    NavigationLink(destination: MemoDetailView(memo: memo)) {
                        VStack(alignment: .leading) {
                            Text(memo.title)
                                .font(.headline)
                            Text(memo.content)
                                .font(.subheadline)
                                .foregroundColor(.gray)
                        }
                    }
                }
            }
            .navigationTitle("Memo")
            .navigationBarItems(trailing:
                NavigationLink(destination: MemoEditView(memos: $memos)) {
                    Image(systemName: "plus")
                }
            )
        }
    }
}

3. 상세 뷰 생성

메모의 상세 정보를 표시하는 뷰를 생성합니다. 이 뷰에서는 'TextEditor'를 사용하여 메모의 제목과 내용을 표시하고 수정할 수 있습니다.

struct MemoDetailView: View {
    @State var memo: Memo
    
    var body: some View {
        VStack {
            TextEditor(text: $memo.title)
                .font(.headline)
                .padding(.vertical, 8)
            Divider()
            TextEditor(text: $memo.content)
                .font(.subheadline)
        }
        .padding()
    }
}

 

4. 추가/수정 뷰 생성

새로운 메모를 추가하거나 메모를 수정할 때 사용하는 뷰를 생성합니다. 이 뷰에서는 'TextField'와 'TextEditor'를 사용하여 메모의 제목과 내용을 입력할 수 있습니다.

struct MemoEditView: View {
    @Binding var memos: [Memo]
    @State var memo: Memo = Memo(title: "", content: "")
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            TextField("Title", text: $memo.title)
                .font(.headline)
                .padding(.vertical, 8)
            Divider()
            TextEditor(text: $memo.content)
                .font(.subheadline)
        }
        .padding()
        .navigationBarTitle("New Memo")
        .navigationBarItems(trailing:
                   Button("Save") {
            memos.append(memo)
            presentationMode.wrappedValue.dismiss()
        }
        .disabled(memo.title.isEmpty || memo.content.isEmpty)
    	)
	}
}

 

6. 메모 앱 실행

이제 앱을 실행하면 메모 리스트를 볼 수 있습니다. 리스트에서 메모를 선택하면 해당 메모의 상세 정보를 볼 수 있고, 추가 버튼을 눌러 새로운 메모를 추가할 수 있습니다.

@main
struct MemoApp: App {
    var body: some Scene {
        WindowGroup {
            MemoListView()
        }
    }
}

 

이상으로 간단한 메모장 앱을 SwiftUI로 만드는 방법에 대해 설명해보았습니다. 더 다양한 기능을 추가하여 실용적인 앱으로 만들어 볼 수 있습니다. 따라서 여러 기능들을 학습해 가며 다양한 앱을 만들어보시길 권장합니다.