[Flutter] 보이지 않는 손, ViewModel이 Flutter를 움직이는 방법

서연·2025년 10월 2일
post-thumbnail

📖 ViewModel의 역할

🎯 ViewModel

  • Flutter에서 UI와 비즈니스 로직을 분리하기 위해 사용하는 중간 계층이다.
  • 화면은 보여주기만 하고 ViewModel이 '어떻게 보여줄지'를 결정한다.

🧩 ViewModel의 핵심 역할

💡 UI와 비즈니스 로직 분리

  • 화면(UI)은 보여주는 일에만 집중한다.
  • 데이터 처리, 상태 변경 등 복잡한 로직은 ViewModel이 담당한다.
  • 코드의 유지보수성과 확장성이 높아진다.

🔄 상태 관리 (State Management)

  • 화면에서 보여줄 데이터를 저장하고 관리한다.
  • 사용자의 행동 (예: 버튼 클릭, 입력)에 따라 상태를 변경하고 UI는 이 변화를 감지해 자동으로 다시 그려준다.

🔗 View와 Model 사이의 다리 역할

  • View(UI)ViewModel을 통해 데이터에 접근한다.
  • ViewModelModel(Repository, usecase 등)과 통신해 데이터를 가져오고 화면에 맞게 가공한다.

🗂️ 데이터 관리와 연결

  • ViewModelModel을 통해 가져온 데이터를 저장하고 관리한다.
  • UI에 표시될 형태로 필요한 데이터만 보관한다.
  • Repository와 통신하여 데이터 소스에 접근한다.

🌈 ViewModel을 사용하면 좋은 이유

  • UI는 화면 구성에만 집중한다.
  • ViewModel은 데이터 및 로직을 담당한다.
  • 코드 구조가 깔끔해지고 테스트가 쉬워진다.
  • 기능 변경 시 UI와 로직을 각각 독립적으로 수정 가능하다.

👉 ViewModel은 UI와 로직을 각각 독립적으로 수정 가능하다.

0개의 댓글