MVC, Flux

MVC, MVVM 같은 키워드는 소프트웨어 설계와 관련된 디자인 패턴으로, 소프트웨어 공학에서의 "흔히 사용되는" 설계 패턴을 의미한다.

 

React에 단방향 데이터 흐름, Redux에 Flux 패턴 역시 일종의 디자인 패턴이다.

 

MVC(Model-View-Controller)

MVC 패턴은 Model + View + Controller를 합친 용어

 

구조

출처: [디자인패턴] MVC, MVP, MVVM 비교 / 버미노트

 

 

• Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분
• View : 사용자에서 보여지는 UI 부분
• Controller : 사용자의 입력(Action)을 받고 처리하는 부분

 

동작

MVC 패턴의 동작 순서는 아래와 같다.

1. 사용자의 Action들은 Controller에 들어옴
2. Controller는 사용자의 Action를 확인하고, Model을 업데이트
3. Controller는 Model을 나타내 줄 View를 선택
4. View는 Model을 이용하여 화면을 나타냄

* 참고 - MVC에서 View가 업데이트 되는 방법

• View가 Model을 이용하여 직접 업데이트 하는 방법
• Model에서 View에게 Notify 하여 업데이트 하는 방법
• View가 Polling으로 주기적으로 Model의 변경을 감지하여 업데이트 하는 방법

 

특징

- Controller는 여러개의 View를 선택할 수 있는 1:n 구조

- Controller는 View를 선택할 뿐 직접 업데이트 하지 않음(View는 Controller를 알지 못함)

 

장점

MVC 패턴의 장점은 널리 사용되고 있는 패턴이라는 점에 걸맞게 가장 단순하다. 단순하다 보니 보편적으로 많이 사용되는 디자인 패턴

 

단점

MVC 패턴의 단점은 View와 Model 사이의 의존성이 높다는 것이다. View와 Model의 높은 의존성은 어플리케이션이 커질수록 복잡하지고 유지보수가 어렵게 만들 수 있다.

Flux

 

Flux는 MVC 모델의 단점을 보안하기 위해 페이스북에서 발표한 아키텍처

 

MVC 패턴에서 Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 한다. Model이 업데이트 되면, View는 화면에 반영하고  View가 Model을 업데이트 할 수도 있다. Model이 업데이트 되어 View가 따라서 업데이트 되고, 업데이트 된 View가 다시 다른 Model을 업데이트 한다면, 또 다른 View가 업데이트 될 수 있다.

 

복잡하지 않은 어플리케이션에서는 양방향 데이터 흐름이 문제가 크지 않을 수 있지만 어플리케이션이 복잡해 진다면 이런 양방향 데이터 흐름은 새로운 기능이 추가 될 때에 시스템의 복잡도를 기하급수적으로 증가 시키고, 예측 불가능한 코드를 만들게 되는 것이다. 개발자가 만든 어플리케이션이 개발자도 예측 못할 버그들을 쏟아 내게 된다.

 

페이스북에서 이 문제의 해결 방법을 단방향 데이터 흐름으로 어플리케이션을 예측 가능하도록 만드는 방법에서 찾았다.

Flux의 가장 큰 특징은 단방향 데이터 흐름

 

데이터 흐름은 항상 Dispatcher에서 Store로, Store에서 View로, View는 Action을 통해 다시 Dispatcher로 데이터가 흐르게 된다. 이런 단방향 데이터 흐름은 데이터 변화를 휠씬 예측하기 쉽게 만든다.

 

Flux를 크게 Dispatcher, Store, View 세 부분으로 구성

 

Dispatcher

Dispatcher는 Flux의 모든 데이터 흐름을 관리하는 허브 역할을 하는 부분

 

Action이 발생되면 Dispatcher로 전달되는데, Dispatcher는 전달된 Action을 보고, 등록된 콜백 함수를 실행하여 Store에 데이터를 전달한다. Dispatcher는 전체 어플리케이션에서 한 개의 인스턴스만 사용된다.

Store

어플리케이션의 모든 상태 변경은 Store에 의해 결정

 

Dispatcher로 부터 메시지를 수신 받기 위해서는 Dispatcher에 콜백 함수를 등록해야 한다. Store가 변경되면 View에 변경되었다는 사실을 알려주게 된다.

View

Flux의 View는 화면에 나타내는 것 뿐만이나라, 자식 View로 데이터를 흘려 보내는 뷰 컨트롤러의 역할도 함께 한다.

Action

Dispatcher에서 콜백 함수가 실행 되면 Store가 업데이트 되게 되는데, 이 콜백 함수를 실행 할 떼 데이터가 담겨 있는 객체가 인수로 전달 되어야 합니다. 이 전달 되는 객체를 Action이라고 하는데, Action은 대채로 액션 생성자(Action creator)에서 만들어진다.

 

 

---

 

출처:

• [디자인패턴] MVC, MVP, MVVM 비교 / 버미노트
• [디자인패턴] Flux, MVC 비교 / 버미노트