[Flutter] Monolithic (모노리스) 구조의 특징

하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 흔히 Monolithic Architecture
또는 간단히 Monolith 라고 부릅니다.

 

먼저 MVVM 패턴 없이 간단한 구조로 코드를 작성해보자. 모든 로직과 상태 관리를 하나의 파일에 통합하여, UI와 데이터 처리가 한 클래스에서 이루어지는 방식으로 코드를 작성할 수 있다. 이 방식은 MVVM과 같은 디자인 패턴이 없어도 간단한 앱에서는 빠르게 개발할 수 있는 장점이 있다.

 

1. UI와 데이터 로직이 한 곳에 있음
   • StatefulWidget을 사용하여 UI와 데이터 로직을 하나의 파일에 결합했습니다.
2. 상태 변경 및 UI 업데이트:
   • addTodo와 removeTodo 메서드는 각각 새로운 할 일을 추가하고, 삭제하는 로직을 포함하고 있습니다.
   • setState()를 호출하여 todos 리스트의 변경을 Flutter에 알리고, UI가 재렌더링되도록 했습니다.
3. 간단한 구조:
   • 작은 규모의 앱이나 간단한 기능을 가진 앱에 적합한 구조입니다.

이 방식은 디자인 패턴이 없기 때문에 유지 보수가 어렵거나 코드가 복잡해지기 쉬운 단점이 있지만, 빠르고 간단하게 앱을 만들 수 있는 장점이 있음.

 

import 'package:flutter/material.dart';

void main() => runApp(TodoApp());

class TodoApp extends StatelessWidget {
  const TodoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoScreen(),
    );
  }
}

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Todo기능을 개발 하기 위해 필요한 데이터는 뭘까?
  // UI 로직 : 프로젠테이션 로직
  final TextEditingController _controller = TextEditingController();

  // 데이터 : 할 일을 (목록을) 저장하는 리스트(저장 공간)
  List<String> todos = [];  // -> 데이터

  // 비즈니스 로직 : 할 일을 추가하는 기능
  void addTodo() {
    // 자료구조에 접근해서 사용자가 넣은 데이터를 추가하는 기능
    if(_controller.text.isNotEmpty){
      // 프로젠테이션 로직 (화면 동작)
      setState(() {
        // 비어 있지 않다면 코드를 수행
        todos.add(_controller.text); // -> 자료구조에 들어감

        print('todos 확인 : ${todos.toString()}');
      });

      _controller.clear(); // 프로젠테이션 로직 (화면 단 로직)
    }
  }

  // 비즈니스 로직 : 할 일을 삭제하는 기능
  void removeTodo(int index) {
    // 자료구조에 접근해서 해당 항목을 삭제 하는 기능
    // 삭제 처리
    setState(() {
      // 프로젠테이션 로직 (화면 동작)
      todos.removeAt(index);
    });

  }

  @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: addTodo,
                  icon: Icon(Icons.add),
                )
              ],
            ),
          ),
          // 아래에 할 일 목록 표시 구성
          Expanded(
            child: ListView.builder(
                itemCount: todos.length,
                itemBuilder: (context, index) {
              return ListTile(
                title: Text(todos[index]),
                // trailing --> 오른쪽
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    // 비즈니스 로직 호출
                    removeTodo(index);
                  },
                ),
              );
            }),
          ),
        ],
      ),
    );
  }
}