[Flutter] Clean Architecture / MVVM

Architecture가 왜 중요한가

모바일 환경은 자원의 한계, 라이프 사이클 처리의 복잡함 등의 문제, 프리젠테이션 로직 자체의 복잡하고 비동기 처리가 많은 특성이 있다.

좋은 Architecture는 개발속도, 유지보수, 확장성, 코드의 품질, 가독성을 높일 수 있다. 

 

Clean Architecture

Clean Architecture는 뒤섞인 로직들을 근본적으로 분리시켜준다. 

모듈의 변경이 다른 모듈에 영향을 미치지 않고 같은 모듈 내에서는 일관되고 응집력 있는 결합을 제공할 수 있도록 계층을 구분하는 것이다.

계층을 분리함으로 규모가 큰 앱의 소스코드 전반을 쉽게 장악할 수 있다.

특정 계층에 대한 수정이 다른 계층에 거의 영향을 주지 않는다. 

 

MVVM(Model-view-viewmodel)

MVVM은 비즈니스 개발에서 그래픽 사용자 인터페이스의 개발의 분리를 용이하게 하는 컴퓨터 소프트웨어의 아키텍처 패턴이다.  

사용자 인터페이스(UI)에서 애플리케이션의 비즈니스 및 프레젠테이션 로직을 명확하게 분리하는데 도움이 된다.

응용 프로그램 논리와 UI 사이의 명확한 분리를 유지하면 수많은 개발 문제를 해결하고 응용 프로그램을 더 쉽게 테스트, 유지 관리 및 발전시킬 수 있다.

또한 코드 재사용 기회를 크게 개선할 수 있으며 개발자와 UI 디자이너가 앱의 각 부분을 개발할 때 더 쉽게 협업할 수 있다.

MVVM은 비즈니스 로직을 뷰에서 뷰모델과 모델로 옮기는 데 유용하다. ViewModel은 모든 사용자 이벤트를 전달하고 결과를 반환하는 뷰와 모델 사이의 매개체 역할을 한다.

프레젠테이션 계층과 로직의 결합을 느슨하게 하므로 코드를 쉽게 유지보수할 수 있다. 

 

 

Model

Model은 실제 상태 컨텐츠를 나타내는 도메인 모델 또는 콘텐츠를 나타내는 데이터 액세스 계층을 나타낸다.

Model 클래스는 앱의 데이터를 캡슐화하는 비시각적인 클래스이다. 일반적으로 데이터 액세스 및 캐싱을 캡슐화하는 서비스 또는 레포지토리와 함께 사용된다.

 

View

사용자가 화면에서 보는 레이아웃이다. 사용자의 상호 작용(클릭, 키보드 입력, 탭 제스처 등)을 수신하고 데이터 바인딩을 통해 이러한 처리를 View model에 전달한다.

 

View model

공용 속성 및 명령을 노출하는 View의 추상화이다. View Model은 값 변환기이다. 이는 쉽게 관리하고 표시할 수 있는 방식으로 모델의 데이터 개체를 노출하는 역할을 한다. 이 점에서 view model은 view 보다 model에 더 가깝고 View의 표시 로직의 대부분을 처리한다. 

view model은 view가 데이터 바인딩할 수 있는 속성과 명령을 구현하고 변경 알림 이벤트를 통해 상태 변경을 view에 알린다.

Provider를 사용하는 예에서 view model 클래스는 changeNotifier를 mixin하고 상태 변경이 이뤄지는 메소드에서 notifyListeners를 호출하여 view가 다시 build 되도록 한다.

view model이 제공하는 속성과 명령은 UI에서 제공할 기능을 정의하지만 view는 해당 기능이 표시되는 방식을 결정한다.

이 접근 방식을 위해 필요한 의존성을 제공해야 한다. 

 

Dependency injection 의존성 주입

일반적으로 클래스 생성자는 개체를 인스턴스화할 때 호출되며 개체에 필요한 모든 값은 생성자에 대한 인수로 전달된다. 이것은 생성자 주입으로 알려진 의존성 주입의 예다. 개체에 필요한 의존성 생성자에 주입된다.

의존성 주입은 의존하는 객체를 직접 생성하는 것이 아니라 외부에서 생성한 객체를 주입해주는 것을 말한다. 이를 통해 객체 간의 결합도를 낮출 수 있으며, 유연한 코드를 작성할 수 있게 된다.

riverpod를 사용한다고 가정할때, 아래와 같은 방식으로 provider가 의존성 주입의 역할을 하여  이를 필요로하는 특정 클래스 또는 위젯에서 사용할 수 있게 한다. (의존성 주입은 더 광범위한 개념이지만 의존성 주입의 한 형태로 간주될 수 있다.)

의존성 대한 provider를 정의한다.

final yourDependencyProvider = Provider<YourDependency>((ref) {
  // Create and return an instance of YourDependency
  return YourDependency();
});

특정 클래스 또는 위젯에서 provider를 사용한다.

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final yourDependency = ref.watch(yourDependencyProvider);
    // Use yourDependency in your widget

    return Container();
  }
}

 

Repository

데이터 저장과 관련된 로직을 처리한다. 실제 사용할 데이터들이 모여있는 data source(로컬 파일 / DB, 원격 저장소 API)에 저장된 정보를 접근하고 가져온 데이터를 저장한다. view model은 여러 repository를 참조할 수 있다. 

ViewModel은 필요한 데이터를 Repository에 요청하고 Repository는 적절한 저장소에서 요청받은 데이터를 가져온다.
Repository가 추상화되어 있기 때문에 ViewModel은 언제나 같은 인터페이스로 데이터를 요청할 수 있으며, 실제로 어떤 데이터를 사용하는지 전혀 알 필요가 없기 때문에 앱 환경에 맞는 적절한 데이터를 사용하기에 편리하다.

 

세부적인 설명은 다음과 같다

출처 : Totally 개발자

View	사용자에게 보여지는 영역
ViewModel	View의 상태를 관리하고 View의 비즈니스 로직을 담당
Repository	데이터 저장소라는 뜻으로 DataLayer인 DataSource에 접근
DataSource	데이터를 가져오는 영역
Model	데이터 설계

 

 

References

https://medium.com/@justfaceit/i-%EC%99%9C-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%95%B1-%EA%B0%9C%EB%B0%9C%EC%97%90%EC%84%9C%EB%8F%84-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98%EA%B0%80-%EC%A4%91%EC%9A%94%ED%95%9C%EA%B0%80-b6616d586575

I. 왜 모바일 앱 개발에서도 아키텍처가 중요한가?

https://medium.com/@justfaceit/clean-architecture%EB%8A%94-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B0%9C%EB%B0%9C%EC%9D%84-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%84%EC%99%80%EC%A3%BC%EB%8A%94%EA%B0%80-1-%EA%B2%BD%EA%B3%84%EC%84%A0-%EA%B3%84%EC%B8%B5%EC%9D%84-%EC%A0%95%EC%9D%98%ED%95%B4%EC%A4%80%EB%8B%A4-b77496744616

Clean Architecture는 모바일 개발을 어떻게 도와주는가? - (1) 경계선: 계층 나누기

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

Model–view–viewmodel - Wikipedia

https://learn.microsoft.com/en-us/dotnet/architecture/maui/mvvm

Model-View-ViewModel

https://medium.com/flutterworld/flutter-mvvm-architecture-f8bed2521958

Flutter: MVVM Architecture

https://ctoahn.tistory.com/10

Flutter 앱 개발을 위한 MVVM아키텍처 - 1부 MVVM이란?

https://totally-developer.tistory.com/115

[043] 플러터 (Flutter) 배우기 - MVVM 아키텍처 패턴 적용

https://velog.io/@mm723/MVVM-Pattern-in-Flutter-3-Dependency-Injection

MVVM Pattern in Flutter 3 - Dependency Injection

https://0391kjy.tistory.com/39

Repository Pattern 이해하기