[Flutter] MVC 패턴 이란 무엇인가?

https://pub.dev/packages/mvc_pattern

mvc_pattern | Flutter Package

 

1. MVC패턴을 사용해야 하는 이유에 대하여

만약 내가 회사에 들어가서 프로젝트를 맡게 되고 내가 혼자서 코드를 작성해서 계속해서 유지보수를 하고 있다고 가정해보자.

당연히 내가 작성한 코드이므로 내가 보기 편하게 작성했으므로 나 혼자만 본다 가정하면 문제가 없다.

하지만 사정이 생겨서 다른 사람에게 유지보수를 맡겨야 하는일이 발생했다고 가정한다면

나만의 규칙으로 작성한 내 코드를 다른 사람이 보기에는 이해하기 어려운 코드가 될 것 이다.

우리는 각자 코딩하는 사고방식이 다르기에 똑같은 같은 로직을 개발해도 똑같은 코드가 나올수가 없다.

 

이를 방지하기 위해서 우리는 MVC라는 규칙을 통해 누가 코딩을 하던지 코드를 이해하기 쉽도록 만드는 것이다.

M (Model) -> 애플리케이션의 정보(데이터)

V (View) -> 텍스트, 체크박스, 등과 같은 사용자 인터페이스 요소

C (Controller) -> 데이터와 비즈니스 로직 사이의 상호동작 관리

 

MVC패턴을 사용할경우의 장점
 1. 개발속도의 향상
 2. 다른 사람이 개발한 코드의 패턴을 쉽게 파악이 가능
 3. MVC패턴은 이미 검증된 방식이라 높은 신뢰성
 4. 코드리뷰를 할때 원활한 커뮤니케이션이 가능

 

wikipedia

모델-뷰-컨트롤러는 소프트웨어 디자인 패턴으로. 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 뒤에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 수정이 가능하도록 애플리케이션을 만들 수 있다.

 

 

---

1. 패턴없는 일반적인 코드

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

  @override
  State<NormalPattern> createState() => _NormalPatternState();
}

class _NormalPatternState extends State<NormalPattern> {
  int count = 0;

  // 함수 시작
  void update() => setState(() {});

  void increment() {
    count++;
    update();
  }

  void decrement() {
    if (count > 0) {
      count--;
      update();
    }
  }
  // 함수 끝

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Normal Pattern')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$count', style: const TextStyle(fontSize: 120)),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                    onPressed: () {
                      increment();
                    },
                    child: const Text('+'),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                    onPressed: () {
                      decrement();
                    },
                    child: const Text('-'),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

따로 기능을 분류해서 관리하지 않고 한 파일에 다같이 넣어서 실행되게 된다.

+ 버튼을 누르면 값이 1 증가하고, - 버튼을 누르면 값이 -1 감소하게 되는 간단한 로직이다.

변화된 값을 화면에 그려주기 위해서 setState(){}를 통해서 재빌드를 해준다.

 

위와 같이 패턴 없이 구성하게 된다면 한 코드안에 모든 기능이 들어있으므로 재수정 및 기능 추가시 코드의 가독성이 떨어지게 된다.

 

2. MVC 패턴을 통한 구현

위 코드를 3개의 파일로 나눠보자!

Model
View
Controller

 

`model.dart`

class Model {
  int _count = 0;

  int get counter => _count;

  int increment() => ++_count;

  int decrement() => --_count;

  int reset() => _count = 0;
}

모델부분은 데이터를 저장하는 하드디스크라 생각하면 간편하다.

 즉 여기서 모든 데이터의 실제 값을 저장하고 수정하는 역활을 하게 된다.

 

`mvc_controller.dart`

import 'package:flutter_application_1/model/model.dart';
import 'package:mvc_pattern/mvc_pattern.dart';

class MvcController extends ControllerMVC {
  factory MvcController([StateMVC? state]) => _this ??= MvcController._(state);

  MvcController._(StateMVC? state)
      : model = Model(),
        super(state);

  static MvcController? _this;
  final Model model;

  // 함수 시작
  void update() {
    setState(() {});
  }

  int get count => model.counter;

  void increment() {
    model.increment();
    update();
  }

  void decrement() {
    if (count > 0) {
      model.decrement();
      update();
    }
  }

  void reset() {
    model.reset();
    update();
  }
  // 함수 끝
}

모델에 값이 변화가 된다면 컨트롤러에서는 값이 변경됬으니 값을 수정하라고 명령을 내린다.

예를들어서 View에서 버튼을 클릭해서 값을 +1 증가시키도록 하였다면 컨트롤러에서는 값을 +1 증가시키는 함수가 실행이되고

Model에서는 실직적으로 값이 수정이 되는 방식이다.

 

`mvc_view.dart`

import 'package:flutter/material.dart';
import 'package:flutter_application_1/mvc/controller/mvc_controller.dart';
import 'package:mvc_pattern/mvc_pattern.dart';

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

  @override
  StateMVC<MvcPattern> createState() => _MvcPatternState();
}

class _MvcPatternState extends StateMVC<MvcPattern> {
  // StateMVC를 상속받음
  _MvcPatternState() : super(MvcController()) {
    con = controller as MvcController;
  }

  late MvcController con;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mvc Pattern'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(con.count.toString(), style: const TextStyle(fontSize: 120)),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: ElevatedButton(
                      onPressed: () {
                        con.increment();
                      },
                      child: const Text('+')),
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: ElevatedButton(
                      onPressed: () {
                        con.decrement();
                      },
                      child: const Text('-')),
                ),
              ],
            ),
            ElevatedButton(
                onPressed: () {
                  con.reset();
                },
                child: const Text('초기화')),
          ],
        ),
      ),
    );
  }
}

뷰에서는 단순히 UI를 꾸며주는 부분이다. 따로 시스템이 작동되는 로직부분은 신경쓰지 않아도 된다.

나머지는 전부 컨트롤러와 모델에서 처리가 되므로

 

이로써 간단하지만 MVC 패턴에 대해서 알아보았다.

그렇다면 MVC만 사용한다면 우리는 완벽한 코드를 작성할 수 있는것일까?

그렇지 않다 사실 MVC에도 문제점이 있다 그래서 이를 보안하기 위해 MVVM이란게 있다.

MVVM에 대해서는 다음 포스팅에 작성하도록 하겠다.