메모 CRUD 기능 구현 — 추가, 수정, 삭제 기본기 익히기

메모 앱의 핵심은 결국 쓰기, 고치기, 지우기다.
아무리 디자인이 예뻐도 CRUD(생성, 읽기, 수정, 삭제)가 제대로 안 되면, 진짜 메모 앱이라고 할 수 없다.

이번 글에서는 Flutter로 메모를 추가하고, 수정하고, 삭제하는 기능을 순차적으로 구현해본다.

---

📥 메모 추가하기

먼저 “+” 버튼을 눌렀을 때 메모를 새로 작성할 수 있도록 TextEditingController와 Navigator를 사용하자.

🧾 메모 작성 화면

class NewMemoScreen extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("새 메모")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              maxLines: null,
              decoration: InputDecoration(hintText: "메모를 작성하세요"),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context, _controller.text);
              },
              child: Text("저장"),
            )
          ],
        ),
      ),
    );
  }
}

🧩 홈 화면에서 결과 받기

onPressed: () async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (_) => NewMemoScreen()),
  );
  if (result != null && result is String) {
    setState(() {
      memoList.add(result);
    });
  }
}

새 메모를 작성한 뒤 결과를 받아와 리스트에 추가해준다.

---

📝 메모 수정하기

수정은 기존 메모 내용을 전달해서 TextField에 미리 보여주고,
저장 시 기존 위치에 덮어쓰면 된다.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => EditMemoScreen(
      initialText: memoList[index],
      onSave: (edited) {
        setState(() {
          memoList[index] = edited;
        });
      },
    ),
  ),
);

✍️ EditMemoScreen 예시

class EditMemoScreen extends StatelessWidget {
  final String initialText;
  final ValueChanged<String> onSave;

  EditMemoScreen({required this.initialText, required this.onSave});

  @override
  Widget build(BuildContext context) {
    final controller = TextEditingController(text: initialText);
    return Scaffold(
      appBar: AppBar(title: Text("메모 수정")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: controller,
              maxLines: null,
            ),
            ElevatedButton(
              onPressed: () {
                onSave(controller.text);
                Navigator.pop(context);
              },
              child: Text("저장"),
            )
          ],
        ),
      ),
    );
  }
}

---

🗑️ 메모 삭제하기

Dismissible(
  key: Key(memoList[index]),
  onDismissed: (direction) {
    setState(() {
      memoList.removeAt(index);
    });
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("메모 삭제됨")));
  },
  child: MemoCard(content: memoList[index]),
)

Flutter의 Dismissible 위젯을 사용하면 손쉽게 스와이프 삭제를 구현할 수 있다.
UX도 훌륭하고 구현도 간단하다.

---

📌 팁: 데이터 저장은 다음 글에서

이번 글은 메모 앱의 UI 기반 CRUD 기능에 집중했다.
데이터가 앱을 껐다 켜도 유지되려면, shared_preferences 또는 local database와 연동해야 한다.

그건 다음 글에서 다루기로 하고, 일단은 메모 앱의 본질인 CRUD 기능을 UI에서 직접 구현해보자.

---

🧘 마무리하며

기록하고, 고치고, 지우는 과정 속에서 앱은 살아 숨 쉰다.
Flutter로 만드는 메모 앱은 단순한 기능 구현을 넘어, 사용자와 감정을 나누는 도구가 될 수 있다.

기록은 시작이다. 지금 한 줄부터 써보자.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 메모 앱 만들기 여정입니다.