1 of 34

D MVC MVP MVVM D

2 of 34

선정 이유?

Flux Pattern

3 of 34

Flux Pattern?

2014년 페이스북(현 meta) F8 컨퍼런스에서 발표된 아키텍처.

어플리케이션에서 데이터를 취급하기 위해 사용하는 디자인 패턴.

Flux Pattern

4 of 34

Flux Pattern?

FB 의 자산들을 사용하기 위해 꼭 이해할 개념

5 of 34

6 of 34

MVC? MVP? MVVM?

소프트웨어 디자인 패턴으로,

사용자 인터페이스 View, 컨트롤러 Controller, 비즈니스 로직 Model 을 구분해

유지보수와 개발 효율을 증진시킨다는 방법론

7 of 34

MVC? MVP? MVVM?

1

+

-

click !

예시) + 버튼을 누르면 숫자값이 1씩 증가하는 로직

8 of 34

MVC?

Model-View-Controller

Input

Controller

Model

View

Action

Update

9 of 34

MVC?

Controller

Model

View

INPUT

+

순서

사용자 Action 입력됨

Model-View-Controller

1

10 of 34

MVC?

INPUT

Controller

Model

View

+

순서

사용자 Action 입력됨

​

Controller 에 Action 전달

​

​

Model-View-Controller

1

11 of 34

MVC?

INPUT

Controller

Model

View

+

순서

사용자 Action 입력됨

​

Controller 에 Action 전달

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model-View-Controller

1

12 of 34

MVC?

INPUT

Controller

Model

View

순서

사용자 Action 입력됨

​

Controller 에 Action 전달

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model 에서 로직 처리, 업데이트

Model-View-Controller

2

13 of 34

MVC?

INPUT

Controller

Model

View

순서

사용자 Action 입력됨

​

Controller 에 Action 전달

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model 에서 로직 처리, 업데이트

​

View 에 새로운 데이터 전달

2

Model-View-Controller

2

14 of 34

MVC?

Model-View-Controller

INPUT

Controller

Model

View

순서

사용자 Action 입력됨

​

Controller 에 Action 전달

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model 에서 로직 처리, 업데이트

​

View 에 새로운 데이터 전달

​

사용자 화면 업데이트

2

2

2

15 of 34

Input

Presenter

Model

View

Action

MVP?

Model-View-Presenter

Action

Update

State Change

16 of 34

MVP?

Presenter

Model

View

INPUT

+

순서

사용자 Action 입력됨

Model-View-Presenter

1

17 of 34

MVP?

Presenter

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

+

Model-View-Presenter

1

18 of 34

MVP?

Presenter

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

Presenter 에 Action 전달

& 새로운 데이터 요청

+

Model-View-Presenter

1

19 of 34

MVP?

Presenter

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

Presenter 에 Action 전달

& 새로운 데이터 요청

​

Model 에 Action 전달

& 새로운 데이터 요청

​

+

Model-View-Presenter

1

20 of 34

MVP?

Presenter

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

Presenter 에 Action 전달

& 새로운 데이터 요청

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model 에서 로직 처리, 업데이트

Model-View-Presenter

2

21 of 34

MVP?

Presenter

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

Presenter 에 Action 전달

& 새로운 데이터 요청

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model 에서 로직 처리, 업데이트

​

Presenter 에 새로운 데이터 전달

2

Model-View-Presenter

2

22 of 34

MVP?

Presenter

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

Presenter 에 Action 전달

& 새로운 데이터 요청

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model 에서 로직 처리, 업데이트

​

Presenter 에 새로운 데이터 전달

​

View 에 새로운 데이터 전달

2

Model-View-Presenter

2

23 of 34

MVP?

Model-View-Presenter

Presenter

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

Presenter 에 Action 전달

& 새로운 데이터 요청

​

Model 에 Action 전달

& 새로운 데이터 요청

​

Model 에서 로직 처리, 업데이트

​

Presenter 에 새로운 데이터 전달

​

View 에 새로운 데이터 전달

​

사용자 화면 업데이트

2

2

2

24 of 34

Input

View Model

Model

View

Action

Command

Data Binding

State Change

MVVM?

Model-View-ViewModel

25 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

+

순서

사용자 Action 입력됨

1

26 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

+

순서

사용자 Action 입력됨

​

View 에 Action 전달

1

27 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

+

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

ViewModel 에 Action 전달

1

Command

28 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

ViewModel 에 Action 전달

​

Model 에 Action 전달

​

+

1

29 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

ViewModel 에 Action 전달

​

Model 에 Action 전달

​

데이터 가공

​

2

30 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

ViewModel 에 Action 전달

​

Model 에 Action 전달

​

데이터 가공

​

ViewModel 에 데이터 응답

2

2

31 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

ViewModel 에 Action 전달

​

Model 에 Action 전달

​

데이터 가공

​

ViewModel 에 데이터 응답

​

Data Binding - 데이터 전달

2

2

2

Data Binding

32 of 34

MVVM?

Model-View-ViewModel

View Model

Model

View

INPUT

순서

사용자 Action 입력됨

​

View 에 Action 전달

​

ViewModel 에 Action 전달

​

Model 에 Action 전달

​

데이터 가공

​

ViewModel 에 데이터 응답

​

Data Binding - 데이터

​

사용자 화면 업데이트

2

2

2

2

33 of 34

MVC?

가장 단순한 패턴으로 보편적으로 널리 사용되고 있음.

But, View 와 Model 사이의 의존성이 높아 커질수록 유지보수가 어려워짐.

MVP?

MVVM?

Model-View-ViewModel

Model-View-Presenter

Model-View-Controller

View 와 Model 의 연결점이 없어 의존성 문제가 사라짐.

But, View 와 Presenter 사이의 의존성이 높음...

View 와 Model & View 와 ViewModel 의 의존성이 없음. 독립적이기에 모듈화 가능.

But, 어려움

34 of 34

참고

나무위키 MVC

What’s a Software Design Pattern?_Lalit Singla_https://www.netsolutions.com/insights/software-design-pattern/

[디자인패턴] MVC, MVP, MVVM_버미노트_https://beomy.tistory.com/43

MVC, MVP 그리고 MVVM 패턴에 대하여_devowen_https://devowen.com/457