MVVM 패턴

이 글은 Level up your React architecture with MVVM 을 정리한 글 입니다.

MVVM 패턴을 React 프로젝트에 적용하면 코드 퀄러티를 향상 시킬 수 있다. MVVM 패턴은 아키텍쳐 패턴이기 때문에 아키텍처를 구성하는 요소들이 있고 각 요소들은 역할과 책임을 가진다.

MVVM 구성 요소

MVVM은 4개의 요소로 구성된다.

  • The View : 유저가 상호작용하는 UI 계층
  • The ViewController : ViewModel에 접근해서 유저의 입력을 처리한다.
  • The ViewModel : Model에 접근하며 비즈니즈 로직을 담당한다.
  • The Model : 애플리케이션 데이터소스

각 구성요소의 관계는 아래와 같다.

그림

View

  • 사용자에게 보여지는 부분으로 사용자는 View와 상호작용한다.
  • 사용자는 View를 통해 이벤트(마우스 클릭, 키보드 입력 등)를 통해 ViewController의 메소드를 트리거한다.
  • 작업의 결과를 보여주는 역할도 한다.
  • View는 데이터를 보여주고 ViewController로부터 전달된 이벤트를 트리거하는 역할만 수행해야 한다. 이를 통해 재사용성을 높이고 테스트 쉽게 한다.

ViewController

  • View의 뇌 역할을 한다. View와 관련된 로직이 있으며 View에 대한 참조를 가진다.
  • View는 ViewModel에 대한 존재를 알지 못한다. View는 ViewController에게 필요한 모든 데이터와 이벤트를 전달받는다.
  • ViewController와 ViewModel은 일대돠 관계이며 ViewController은 여러개의 ViewModel을 가질 수 있다.
  • 사용자의 입력은 ViewController 처리 하는게 좋다. ViewController는 ViewModel에게 데이터를 전달할 때 처리된 데이터를 전달한다.

ViewModel

  • ViewModel는 자바스크립트 클래스로 쉽게 재사용될 수 있다.
  • ViewModel은 생상자를 통해 필요한 의존성을 주입 받는다.
  • Model과 상호작용하며 ViewModel이 업데이트 될 때마다 모든 변경 사항이 자동으로 뷰에 반영된다.

Model

  • 데이터소스 역할을 한다.
  • 모델을 업데이트하는 로직 외에 다른 로직이 있어선 안된다.

Provider

  • MVVM의 구성요소는 아니지만 구성요소를 묶는데 Provider를 사용한다.
  • ViewModel을 생성하며 필요한 모든 의존성을 주입한다.
  • 생성한 ViewModel을 props를 통해 ViewController에게 전달한다.
  • Provider는 구성요소를 묶는 로직 외에 다른 로직은 있어선 안된다.

더 읽어볼 글