MVC vs Flux
- MVC(Model View Controller) 패턴의 문제점인 양방향 데이터 흐름을 해결할 수 있습니다.
Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 합니다. Model이 업데이트 되면, View는 화면에 반영합니다. View 다른 Model를 업데이트 할 수도 있습니다.
복잡하지 않은 어플리케이션에서는 양방향 데이터 흐름이 문제가 되지 않을 수 있지만, 어플리케이션이 복잡해지면 이야기가 달라집니다. 양방향 데이터 흐름은 새로운 기능이 추가 될 때에 시스템의 복잡도를 기하급수적으로 증가시키고, 예측 불가능한 코드를 만들게 됩니다.
Flux
단방향 데이터 흐름을 가지고 있으며 다음과 같이 데이터가 이동합니다.
Action ➔ Dispatcher ➔ Store ➔ View ➔ Action
react에서 인기있는 상태관리 라이브러리 Redux는 Flux를 구현한 라이브러리입니다.
Dispatcher
- Flux의 모든 데이터 흐름을 관리하는 허브 역할을 합니다.
- 전달된 Action을 파악하여, 등록된 콜백 함수를 실행하여 Store에 데이터를 전송합니다.
- Dispatcher는 전체 어플리케이션에서 한 개의 인스턴스만 사용됩니다.
Store
- Application의 특정 도메인에 해당하는 상태를 관리하고 저장합니다.
- Store는 싱글톤으로 관리되며, 상태가 변경되면 View에 데이터를 전송합니다.
View
- 화면에 나타내는 역할과 자식 View로 데이터를 흘려보내는 뷰 컨트롤러 역할도 수행합니다.
Action
- Action creator에서 만들어지며, Dispatcher에서 콜백함수가 실행되면 Store가 업데이트되고 데이터를 담은 객체를 인수로 전달합니다.
- 전달되는 객체가 Action입니다.