[Flutter] MVVM 패턴이란?

• Model: 애플리케이션의 데이터 구조와 비즈니스 로직을 담당합니다. 데이터를 정의하거나 데이터를 처리하는 로직이 포함됩니다.
• View: **사용자 인터페이스(UI)**를 담당합니다. Flutter에서는 화면에 표시되는 위젯들이 View 역할을 하며, ViewModel을 통해 데이터를 받아 화면에 표시합니다.
• ViewModel: 비즈니스 로직과 UI 사이의 중간 역할을 합니다. View에서 받은 요청을 처리하고, Model에서 데이터를 가져와 View에 전달하는 역할을 합니다.

 

model

// todo의 모델 클래스 - 할 일 데이터를 정의
class Todo{
  
  final String id;
  final String title;

  Todo({required this.id, required this.title});
}

view_model

// ViewModel 클래스 - 상태와 로직을 담당 한다.

import 'package:my_mvvm_v01/start02/models/todo.dart';

class TodoViewModel{

  // 데이터가 필요하다.
  List<Todo> todos = [];

  // 할 일을 추가하는 기능
  void addTodo(String title){
    final newTodo = Todo(id: DateTime.now().toString(), title: title);
    todos.add(newTodo);
  }

  // 할 일을 삭제하는 기능
void removeTodo(String id){
    todos.removeWhere((todo) => todo.id == id);
}

}

view

import 'package:flutter/material.dart';
import 'package:my_mvvm_v01/start02/view_models/todo_view_model.dart';

void main() => runApp(MaterialApp(home: TodoScreen()));

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // MVVM 패턴이기 때문에 View는 ViewModel 클래스만 참조 하면 된다.
  final TodoViewModel todoViewModel = TodoViewModel();
  final TextEditingController _controller = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Todo List'),
      ),
      body: Column(
        children: [
          // 입력 필드 만들기
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                // Expanded --> 가능한 한 많은 공간을 차지
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(labelText: '작업을 입력 하시오'),
                  ),
                ),
                IconButton(
                  onPressed: () {
                    if(_controller.text.isNotEmpty){
                      setState(() {
                        todoViewModel.addTodo(_controller.text);
                      });
                      _controller.clear();
                    }
                  },
                  icon: Icon(Icons.add),
                )
              ],
            ),
          ),
          // 아래에 할 일 목록 표시 구성
          Expanded(
            child: ListView.builder(
                itemCount: todoViewModel.todos.length,
                itemBuilder: (context, index) {
                  // 뷰 모델에 있는 자료구조 안에 각 인덱스에 맵핑된 객체 Todo인스턴스 하나
                  final todo = todoViewModel.todos[index];
                  return ListTile(
                    title: Text(todo.title),
                    // trailing --> 오른쪽
                    trailing: IconButton(
                      icon: Icon(Icons.delete),
                      onPressed: () {
                        setState(() {
                          todoViewModel.removeTodo(todo.id);
                        });
                      },
                    ),
                  );
                }),
          ),
        ],
      ),
    );
  }
}