MVVM이란?

  • 우리가 익히 알고있는 MVC(model, view, controller)에서 파생된 패턴으로 MVVM(View Mode), MVW(Whatever)이 나타난다.

  • MVVM(Model-View-ViewModel)

    • M(model) - 실제 데이터를 보관하고 있는 부분으로 불러오거나, 업데이트한다,
    • V(View) - UI로직, 사용자의 눈에 보이는 인터페이스

    • VM(View-Model) Model에 데이터를 요청하고 가공, 모델에 접속하고 비즈니스 로직 처리 Untitled Untitled

    • view는 실제로 유저가 보는 인터페이스부분
      • ui에서 발생하는 이벤트를viewModel에게 알려준다.
    • viewModel은 view와 model사이에 있는 다리역할
      • 값(상태)이 변화되면 view에게 알려준다.
      • viewModel의 데이터를 view에게 전달한다.
      • viewModel에서 model에게 데이터를 업데이트 하고, model로 부터 데이터를 읽어온다.
    • model
      • viewModel에게 데이터가 바뀐것을 알려준다.
  • 이러한 패턴에서 어떠한 이벤트(데이터수정)가 발생시 연결된 viewModel과 view가 작동하는 방식으로 Observer패턴이 사용된다

mvc와 mvvm의 차이점

  • MVC
    • 컨트롤러가 모든 요청을 받아서 view로 유저와 상호작용하고, model과 연결하여 데이터도 처리하였다.
    • model이 view와 controller사이에서 중재자 역할
  • MVVM
    • view에서 viewModel로, viewModel에서 model로 작업을 처리
    • view에서 model을 직접참조하지는 않으며, viewModel을 관찰하며 변경사항을 감지
      • Observer

[https://velog.io/@wnstjr0317/T.I.L-MVVM패턴-in-React-21.03.30](https://velog.io/@wnstjr0317/T.I.L-MVVM%ED%8C%A8%ED%84%B4-in-React-21.03.30)

https://velog.io/@wnstjr0317/T.I.L-MVVM패턴-in-React-21.03.30

View

  • 철저히 보여지는것
  • 화면에 표현, 사용자와 상호작용
  • 데이터의 변화를 감지하는 옵저버를 가지고잇다.

ViewModel

  • javascript의 클래스로 구성
  • UI에 따라 다르게 조정하여 쉽게 재사용 가능
  • 종속성은 생성자를 통해 주입
  • view와 관련된 비즈니스 로직을 처리
  • 데이터를 가공해서 view에서 뿌리기 쉬운 model로 바꾼다.

Model

  • 데이터 소스
  • 실제 모델(데이터)을 업데이트

MVVM의 장점

  • model, view, viewModel사이에 의존성이 없다.
    • 직접적으로 호출하는 관계가 아니라는 의미
    • 테스트 할때는 모델이 변경될때, 옵저버변수가 제대로 반영되었는지 확인한다.

참고