[Flutter] Design Pattern - MVC & MVP

마치 React에서의 관심사 분리와 비슷하게 Flutter에도 관심사 분리를 어떻게 적용시킬지를 정하는 디자인 패턴이 있다.

Flutter로 앱 개발을 하게되면 앱의 확장성과 유지보수의 편의성을 고려해 적용하는 여러가지 디자인 패턴이 있다.

개발하기에 앞서 어떤 디자인 패턴이 있는지 알아보자.

 

MVC

MVC 패턴은 인터페이스, 데이터 데이터 제어에 사용되는 소프트웨어 디자인 패턴이다. Model, ViewModel, View는 각자의 역할을 한다.

 

만약, 한 페이지 안에 변수, 함수, 위젯을 한 번에 선언하게 되면 가독성과 효율이 매우 좋지 않으므로, 코드를 작성하고 수정할 때 많은 시간이 소요될 것이다.

 

이러한 문제를 해결하기위해 각 Model, ViewModel, View로 분리한다면 필요한 부분만을 변경할 수 있고, 특정 위치에 변경 지점이 있다는 것도 인지할 수 있다.

 

Model, View, Controller

• Model
  • data & business logic
• View
  • UI & 유저에게 보여지는 데이터
• Controller
  • model과 view 업데이트하고, flow를 정의하고, 핸들러들을 담당

 

특징

• 최초 Input은 Controller로 향한다.
• View와 Controller는 다대다 관계를 가진다.
• View는 Controller에 대한 정보를 가지고 있지 않는다.
• View는 Model이 데이터를 전달할 것을 알고있다.

장점

• 관심사 분리로 인한 각각의 components를 독립적으로 개발, 테스트, 유지 보수 할 수 있다.
• 분리된 components는 재사용이 용이하고, 새로운 기능들을 추가하기에도 편리하다.
• 깔끔한 구조 덕분에 가독성이 좋으며 코드를 장기적으로 유지하고 확장하기에 용이하다.

단점

• Model과 View 사이의 의존성 때문에 장기적 확장, 유지 보수가 어렵다.

 

 

MVP

MVP 패턴은 MVC 패턴에서 파생된 디자인 패턴으로 안드로이드에서 주로 사용하고 있다. 

 

Model, View, Presenter

• Model
  • data & business logic
• View
  • UI & 유저에게 보여지는 데이터
• Presenter
  • MVC의 컨트롤러와 같은 역할이지만, 뷰에 연결되는 것이 아니라 인터페이스로 연결됨
  • View와 Model 사이의 매개체