[Flutter] "같은 상태지만 다르게 움직인다" — MVVM과 StatefulWidget 이야기
🧠 개요
MVVM 패턴과 StatefulWidget은 둘 다 상태 (State)를 다루지만 역할과 범위가 전혀 다르다.
🏗️ MVVM 패턴(Model - View - ViewModel)
📌 개념
MVVM은 앱 전체의 구조를 설계하는 아키텍처 패턴이다.- UI와 비즈니스 로직, 데이터 처리를 명확하게 분리해 유지 보수성과 재사용성을 높이는 것이 목적이다.
🧩 구성 요소
Model : 데이터 및 비즈니스 로직 처리 (API 통신, DB 등) 한다.ViewModel : 상태 관리 및 로직 수행, View와 Model의 중간 다리 역할이다.View : 화면 표시 (UI)만 담당한다.
🌟 특징
- 각 레이어의 책임이 명확하게 분리된다.
ViewModel을 UI 없이 독립적으로 테스트할 수 있다.- 같은
ViewModel을 여러 View에서 재사용할 수 있다.
View와 ViewModel은 데이터 바인딩을 통해 상태가 자동으로 동기화된다.
📌 개념
Flutter에서 제공하는 상태를 가질 수 있는 UI 컴포넌트이다.- UI 내부에서 발생하는 상태 변화를 감지하고 화면을 다시 빌드 하는 역할을 한다.
⚙️ 동작 방식
setState()를 사용해 상태를 변경한다.- 상태가 바뀌면 해당 위젯이 다시 빌드 되어 UI가 갱신된다.
⚠️ 한계점
State 객체 안에 데이터, 로직, UI 코드가 함께 존재하기 때문에 단순한 기능에는 편리하지만 앱이 커지면 코드가 뒤섞여 복잡해진다.- UI와 로직이 강하게 결합되어 있어 로직만 따로 테스트하거나 재사용하기 어렵다.
🎯 결론
MVVM은 앱을 구조적으로 설계하는 패턴, StatefulWidget은 UI의 상태 변화를 처리하는 도구로 둘은 대체 관계가 아니라 서로 보완 관계이다.MVVM 구조 안에서도 View 단계에서는 StatefulWidget을 사용할 수 있다.
