[Flutter] 디자인 패턴이란? + mvc

패턴은 총 3가지 

 

1. mvc

2. mvp

3. mvvm 

 

세상에 완벽한 패턴은 없음 

mvc 쓰다가 부족함을 느끼고 개선하기 위해 mvp 그리고 마지막 mvvm이 나옴 

 

디자인 패턴은 모두 기능성 역할을 구분하고 의존성을 최소하 하는 것이 목표

 

디자인 패턴은 그냥 코드의 형식을 정의한 것 뿐 

확장된 기능을 여러 곳에서 사용할 수 있도록 거치고 거치고 거쳐서 만들어진 것 

ex_ 싱글톤 패턴, 옵저버 패턴 등등 

 

 

디자인 패턴을 써야하는 이유

- 내가 짠 코드는 내가 작성한 거니까 잘 아는데 협업시 다른 개발자는 보기 힘듦 .. 공통 규격?이 필요 

- 이미 다른 사람이 열심히 검증하고 써왔던 코드가 있는데 안 쓸 이유가 없다 = 시간 절약 

 

* 혼자 개발하는 경우 일단 기능부터 빨리 구현하는 것이 답일 수도 있다. 디자인패턴이 좋으니까 첨부터 디자인 패턴을 적용하고자 하면 시간이 많이 걸리고 오히려 복잡해져 공수가 더 들수도 있다. 

 

---

MVC패턴

 

https://velog.io/@khy226/MVC-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80

MVC 패턴이란?

https://velog.io/@khy226/MVC-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80

 

Model : 비즈니스 로직

View : 화면 

Controller : 연결해주는 부분 

 

 

그냥 패턴없이 짠 경우에서 역할 분리 

 

model

int count = 0;

 

view 

- build 함수 부분 

 

controller 

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

void decrementCounter() {
  count--;
  update();
}

 

모델 ( count ) 를 컨트롤러를 통해서 ( 모델의 값을 변화시키는 함수) 값을 바꾸고 이를 뷰(build 함수) 에서 보여준다 

 

 

https://pub.dev/packages/mvc_pattern

mvc_pattern | Flutter Package

 

mvc 패턴 적용된 코드 

 

모델 

class Model {
  int _count = 0;

  int get counter => _count;
  int incrementCounter() => ++_count;
  int decrementCounter() => --_count;
}

 

 

뷰 

 

class _MVCViewState extends StateMVC<MVCView> {
  _MVCViewState() : super(MVCController()) {
    con = controller as MVCController;
  }

  late MVCController con;

// 생성된 컨트롤러를 클래스 내에 변수로 받아서 사용함 이 컨트롤러로 모델 값 변화시킴
// 뷰를 생성할 때 MVCController를 만들어서 넘겨줌

상속을 StateMVC(MVCView)

해당 클래스 생성시에 controller를 만들어서 넣어줌 

 

 

컨트롤러 

import 'package:dev_pattern_sample/src/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;

// 업데이트 한 경우 setState로 화면을 새로 빌드 
  void update() => setState(() {});

// 모델의 값 변경
  void incrementCounter() {
    model.incrementCounter();
    update();
  }

  void decreamentCounter() {
    model.decrementCounter();
    update();
  }
}

 

컨트롤러가 모델의 값을 변경하고 뷰에서도 컨트롤러를 클래스 내에 변수로 받아서 변경하고 새로 빌드하도록 함 

-> mvc 패턴에서 컨트롤러의 역할이 많다 

 

 

현재 개발하면서 디자인 패턴을 쓸 생각도 안 하고 상태관리도 setState로 해왔는데 좀 더 공부할 필요가 있음을 느꼈다. 

 

 

---

출처

https://github.com/sudar-life/dev_pattern_sample

GitHub - sudar-life/dev_pattern_sample: 플러터에서 mvc 패턴과 mvvm 패턴의 차이를 알아보자.

https://youtu.be/5xLXC1nnjlM