MVVM 패턴

in etc.

친구와 프로젝트를 진행하기 위해 공부해야할 내용을 이전하였다.

사전 지식

디자인 패턴

정의

  • 개발 과정에서 공통으로 발생하는 문제를 해결하기 위해 사용되는 패턴
  • 디자인 패턴은 코드로 구현된 구현체가 아닌 문제 해결을 위한 패턴이기 때문에 자신의 개발 환경에 맞게 구현하는 것은 개발자의 몫

사용해야 하는 이유

  • 증명된 솔루션
    • 최고의 개발자들이 만들어낸 솔루션이고, 오랫동안 사용되어 오면서 안정성 검증이 완료된 솔루션임
    • 문서화도 잘 되어 있음
    • 디자인 패턴을 사용함으로써 패턴대로 코드가 전개되고 수정에 열려있는 구조이기 때문에 유지보수에 들어가는 비용이 줄어듦
  • 어디서든 사용할 수 있음
    • 언어에 제약을 받지 않고 사용할 수 있음
    • 대부분의 디자인 패턴이 객체 지향적으로 문제를 해결하려고 하므로 객체 지향 언어를 사용하고 있다면(객체지향 언어만 가능한 것은 아님) 대부분의 디자인 패턴을 쉽게 구현할 수 있음

서론

MVVM 패턴이란

마틴 파울러의 Presentation 모델 패턴에서 파생된 디자인 패턴이다. MVVM 패턴의 목표는 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것이다. 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하게 되면 테스트, 유지보수, 재사용이 수월해진다.

배경

WPF(Windows Presentation Foundation)와 Silverlight같은 데이터 바인딩을 활용한 환경에서 데이터와 프레젠테이션 로직을 분리하기 위해서 만들어진 디자인 패턴이다.

본론

구성요소

Untitled

  • 뷰는 뷰 모델을 알지만 뷰 모델은 뷰를 알 수 없음
  • 뷰 모델은 모델을 알지만 모델은 뷰 모델을 알 수 없음
  • 이러한 구조를 통해 뷰 모델과 모델이 뷰로부터 독립적인 형태를 만들어서 위에서 말한 ‘UI로부터 비즈니스 로직과 프레젠테이션 로직을 분리’한다는 목적을 이룰 수 있게 된 것

뷰 (View)

  • UI에 관련된 것을 다루는 역할
  • 사용자가 스크린을 통해서 보는 것들에 대한 구조, 레이아웃, 형태를 정의하는 것
  • 뷰는 애니메이션 같은 UI 로직을 포함하되 비즈니스 로직을 포함하지 않아야 함

뷰 모델 (View Model)

Untitled

  • 뷰가 사용할 메서드와 필드를 구현하는 역할 및 뷰에게 상태 변화를 알리는 것 (프레젠테이션 로직)
    • 뷰는 뷰 모델의 상태 변화를 옵저빙
  • 뷰 모델에서 제공하는 메서드와 필드가 UI에서 제공할 기능을 정의하고 뷰가 이 기능을 어떻게 보여줄 것인지 결정함
  • 일반적으로 뷰 모델과 모델은 일대다 관계를 형성
    • 뷰 모델은 뷰가 쉽게 사용할 수 있도록 모델의 데이터를 가공해서 뷰에게 제공함
    • 뷰에서 서로 다른 두 모델의 데이터를 활용한 데이터가 필요하다면 뷰에서 모델의 값을 조작해서 사용하는 것이 아니라, 뷰 모델에서 두 모델의 데이터를 가공하고 뷰에서는 오직 UI만 다루도록 함

모델 (Model)

  • 비즈니스 로직과 유혀성 검사와 데이터를 포함하는 앱의 도메인 모델 역할
  • 모델은 앱에서 사용할 데이터에 관련된 행위와 데이터를 다룸

장점

  • 뷰 모델이 모델과 뷰 사이의 어댑터로서 변경이 생겼을 때 변경을 최소화할 수 있음
  • 모델과 뷰 모델이 뷰로부터 독립적
    • 뷰 모델과 모델을 플랫폼 독립적으로 개발할 수 있음
    • 테스트하기 쉬움
  • 개발 기간 동안 개발자와 디자이너가 동시에 독립적으로(병렬적으로) 작업할 수 있음
    • UI 디자인이 나오지 않았더라도 미리 정의된 모델과 뷰 모델을 먼저 개발할 수 있기 때문에 병렬적인 업무 프로세스가 가능

단점

  • 거대하고 복잡한 앱을 위해서 고안된 디자인 패턴인 만큼, 소형 앱에서 사용하게 되면 오버헤드가 커짐
  • 앱이 너무 거대해지면 앱의 메모리 소모가 데이터 바인딩 때문에 커짐

결론

요약

  • 디자인 패턴은 개발 과정에서 공통으로 발생하는 문제를 해결하기 위해 사용되는 패턴이다.
  • MVVM 패턴의 목표는 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것이다.
  • MVVM 패턴을 통해 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리함으로써 테스트, 유지보수, 재사용이 수월해진다.
  • 뷰는 UI와 UI 로직을 처리한다.
  • 뷰 모델은 프레젠테이션 로직을 처리한다.
  • 모델은 비즈니스 로직과 데이터를 처리한다.

우리 프로젝트에서 사용해야하는 이유

  • MVVM 패턴 학습
  • Flutter와 MVVM 패턴 간 많은 레퍼런스가 존재함
  • 추후 Flutter 관련 취업 시 MVVM 패턴 경험 시 이점이 있을 것으로 예상