MVC와 Flux

MVC 패턴

Model, View, Controller의 약자. 각각의 역할만 담당하면 되기 때문에 효율적이고 유지보수가 편해진다.

MDN 참고
https://developer.mozilla.org/ko/docs/Glossary/MVC

• Model
  • 데이터를 관리하고 가공
• View
  • 인터페이스 요소
• Controller
  • View와 Model을 연결하고 상호 작용을 처리

Model에 데이터를 저장하고 Controller로 Model을 데이터를 관리한다. Model이 변경되면 View를 업데이트 하는데, 중요한 점은 View 통해서 Model을 업데이트가 가능한 양방향 데이터 바인딩을 지원한다는 것이다.

• View → Model
  사용자 입력값을 Model에 반영
• Model → View
  데이터를 받아서 View에 출력

문제는 어플리케이션의 규모가 커져서 Model과 View가 많아지면 데이터 처리가 복잡해지고 예측이 어려워진다.

그래서 페이스북은 데이터의 복잡성을 줄이고 어플리케이션의 확장성을 늘리고자 단방향 데이터 흐름을 가지는 Flux 패턴 구조의 라이브러리를 만든다.

Flux 패턴

단방향 데이터 흐름을 통해 예측 가능하게 어플리케이션의 상태를 관리한다.

• Action
  • 사용자와의 상호 작용
• Dispatcher
  • 데이터 흐름을 관리
  • 액션을 스토어에 전달
• Store
  • 화면에 표시할 데이터
  • 액션에 따라서 상태를 업데이트
• View
  • 인터페이스 요소

Action(상호작용)이 발생하면 Dispatcher에 전달되고 Store에 변경된 데이터를 쌓다가 한번에 View에 렌더링한다.

View에서 Action이 발생하면 Store를 바로 업데이트하는 것이 아니라 Dispatcher를 거쳐 업데이트하기 때문에 데이터 흐름을 따라가기 용이하고 디버깅할 위치를 찾아내기 쉬워진다.