[Flutter] MVVM ChangeNotifier:: (화면) / (데이터, 로직) 따로

이번 포스트에서는 MVVM 패턴과 ChangeNotifier를 활용해서 책임을 깔끔하게 분리하는 방법을 알아보겠습니다. 코드가 얼마나 깔끔해지는지 직접 확인해보세요!

StatefulWidget의 문제점 되짚어보기

// 이전 방식: 모든 것이 한 곳에
class _StateCounterHomePageState extends State<StateCounterHomePage> {
  int count = 0;                    // 데이터
  
  Widget build(BuildContext context) { ... }  // 화면
  
  onPressed: () {                   // 로직
    setState(() { count++; });
  }
}

문제점: 화면 + 데이터 + 로직이 모두 섞여있어서 유지보수가 어려움

MVVM 패턴이란?

MVVM = Model + View + ViewModel

• Model: 데이터 구조 (오늘 예제에서는 단순히 int)
• View: UI 화면 (Widget)
• ViewModel: 데이터와 로직을 관리하는 중간 계층

ChangeNotifier의 역할

ChangeNotifier는 Flutter에서 제공하는 관찰자 패턴(Observer Pattern) 구현체입니다.

class CounterViewModel extends ChangeNotifier {
  // 데이터 보관
  int count = 0;
  
  // 로직 실행
  void countUp() {
    count = count + 1;
    notifyListeners(); // 변경사항 알림
  }
}

동작 방식

1. 데이터 변경 → 2. notifyListeners() 호출 → 3. UI 자동 업데이트

코드 분석: 깔끔하게 분리된 구조

ViewModel: 데이터와 로직 담당

class CounterViewModel extends ChangeNotifier {
  // 데이터
  int count = 0;
  
  CounterViewModel(); // 생성자
  
  // ⚡ 로직
  void countUp() {
    print('CounterViewModel - countUp count: $count');
    count = count + 1;
    notifyListeners(); // "상태가 변경됐어요!" 알림
  }
  
  void countDown() {
    count = count - 1;
    notifyListeners(); // UI에게 다시 그리라고 신호
  }
}

 

특징:

• UI와 완전히 분리된 순수한 Dart 클래스
• Flutter 위젯과 독립적으로 테스트 가능
• 비즈니스 로직에만 집중

View: 화면만 담당

class MvvmChangeNotifierHomePage extends StatelessWidget {
  MvvmChangeNotifierHomePage({super.key});
  
  final viewModel = CounterViewModel(); // ViewModel 인스턴스 생성
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MMVM Notifier Counter App')),
      body: SafeArea(
        child: Center(
          // ListenableBuilder로 변경사항 감지
          child: ListenableBuilder(
            listenable: viewModel, 
            builder: (context, child) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                spacing: 10,
                children: [
                  Text(
                    'Counter.count : ${viewModel.count}', // 데이터 표시
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      viewModel.countUp(); // 로직 호출
                    },
                    child: Text('카운트 증가'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      viewModel.countDown(); // 로직 호출
                    },
                    child: Text('카운트 감소'),
                  ),
                ],
              );
            }
          ),
        ),
      ),
    );
  }
}

 

특징:

• StatelessWidget 사용! (상태 관리는 ViewModel이 담당)
• ListenableBuilder가 ViewModel의 변경사항을 자동으로 감지
• 오직 UI 구성에만 집중

ListenableBuilder의 특징

ListenableBuilder(
  listenable: viewModel,        // 이 객체의 변화를 들어라
  builder: (context, child) {   // 변화가 있으면 이 함수를 다시 실행해라
    return Column(...);         // 새로운 UI를 그려라
  }
)

StatefulWidget vs MVVM ChangeNotifier 비교

책임 분리

// StatefulWidget: 모든 것이 한 곳에
class _CounterState extends State<CounterWidget> {
  int count = 0;                           // 데이터
  Widget build() { return ...; }          // 화면
  onPressed: () { setState(() {...}); }   // 로직
}

// MVVM: 깔끔하게 분리
class CounterViewModel extends ChangeNotifier {
  int count = 0;           // 데이터
  void countUp() {...}     // 로직
}
class CounterView extends StatelessWidget {
  Widget build() {...}     // 화면
}