리액트 공부 1일차

벨로퍼트선생님의 강의를 듣다가 책에는 더욱 다양한 예제가 있다는 말을듣고 책을 구매하여 공부하기로 결정하였다.

1일차 공부중 낯선 개념들을 보게되었고 개념을 정리해보기로 하였다.

P42, MVC, MVW

 

MVW(Model+View+Whatever)

개념

기존의 Presentation Pattern들 중 MVx에 해당하는 패턴을 포함(e.g, MVC, MVP, MVVM, etc) 또는 Model과 View 그리고 ‘무엇이든지’ 올 수 있음을 의미하는 용어로 사용된다.

MVW에 해당하는 MVC/MVP/MVVM 패턴에 대해 간단히 알아본다.

MVC(Model + View + Controller)

Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분
View : 사용자에게 제공되어 보여지는 UI 부분
Controller : 사용자의 입력을 받고 처리하는 부분

정리

1. Controller로 사용자의 입력이 들어옵니다.
2. Controller는 Model을 데이터 업데이트 및 불러오고
3. Model은 해당 데이터를 보여줄 View를 선택해서 화면에 보여주게 됩니다.

단점

View와 Model이 서로 의존적

최대한 서로의 의존성을 줄일수 있도록 노력해야 합니다.
그런 노력에 의해 파생되어 나온 프레임워크가 다음으로 설명드릴 MVP 패턴 입니다.

MVP (Model + View + Presenter)

  MVP는 Model과 View는 같습니다. 다만 Controller 대신 Presenter가 존재합니다.

Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분
View : 사용자에게 제공되어 보여지는 UI 부분
Presenter : View에서 요청한 정보를 Model로 부터 가공해서 View로 전달하는 부분

  Model과 View는 MVC와 동일하지만 사용자 입력을 View에서 받습니다.
그리고 Model과 View는 각각 Presenter와 상호 동작을 하게 됩니다.

항상 Presenter을 거쳐서 동작하는 것이죠.

그러므로 View와 Model은 서로를 알필요가 전혀 없습니다. Presenter만 알면 되죠.
그래서 MVC의 단점인 View와 Model의 의존성이 없어지게 됩니다.

정리

1. View로 사용자의 입력이 들어옵니다.
2. View는 Presenter에 작업 요청을 합니다.
3. Presenter에서 필요한 데이터를 Model에 요청 합니다.
4. Model은 Presenter에 필요한 데이터를 응답 합니다.
5. Presenter는 View에 데이터를 응답 합니다.
6. View는 Presenter로부터 받은 데이터로 화면에 보여주게 됩니다.

단점

View와 Model은 의존성이 없는 대신 View와 Presenter가 1:1로 강한 의존성

이런 단점을 해결할 또 다른 프레임워크가 등장을 합니다. 바로 MVVM 입니다.

MVVM(Model + View + ViewModel)

MVVM은 WPF나 SilverLight에서 많이 사용되는 프레임워크 패턴

Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분
View : 사용자에게 제공되어 보여지는 UI 부분
ViewModel : View를 표현하기 위해 만들어진 View를 위한 Model
Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분

MVVM은 두가지 디자인 패턴을 사용합니다.

바로 Command패턴과 Data Binding 인데요.

이 두가지 패턴으로 인해 View와 ViewModel은 의존성이 완전히 사라지게 됩니다.

MVP와 마찬가지로 View에서 입력이 들어오구요. 입력이 들어오면 Command 패턴을 통해

ViewModel에 명령을 내리게 되고 Data Binding으로 인해 ViewModel의 값이 변화하면

바로 View의 정보가 바뀌어져 버리게 됩니다.

정리

1. View에 입력이 들어오면 Command 패턴으로 ViewModel에 명령을 합니다.
2. ViewModel은 필요한 데이터를 Model에 요청 합니다.
3. Model은 ViewModel에 필요한 데이터를 응답 합니다.
4. ViewModel은 응답 받은 데이터를 가공해서 저장 합니다.
5. View는 ViewModel과의 Data Binding으로 인해 자동으로 갱신 됩니다.

 

참고 : https://magi82.github.io/android-mvc-mvp-mvvm/