Flux

MVC

MVC 는 하나의 애플리케이션을 Model, View, Controller 세 가지의 역할로 구분한 패턴입니다.

Flux

Flux 는 Facebook이 클라이언트 측 웹 애플리케이션을 구축하는 데 사용하는 애플리케이션 아키텍쳐입니다. 대규모 프로젝트에서 너무 복잡해지는 MVC구조의 단점을 보완하는 단방향 데이터 흐름 (unidirectional data flow)의 구조입니다.
단방향 데이터 흐름을 활용하여 React의 구성 가능한 뷰 구성 요소를 보완합니다.
MVC 패턴을 사용했던 Facebook에서 읽지 않은 메시지 수를 보여주는데 종속성 및 계단식 업데이트에서 데이터 흐름이 뒤엉켜 문제가 발생하였습니다. 이는 하나의 변경이 다수의 변경을 일으킬 위험이 있고, 디버그하기 또한 어렵게 만들었습니다. MVC의 문제를 해결하기 위해 만들어진 아키텍쳐가 Flux 입니다.

• Action : 모든 변경사항과 사용자의 상호작용들이 포함됩니다. Action Creator 에 의해 만들어진 Action Message 는 dispatcher 로 넘겨줍니다.
• Dispatcher : Flux의 모든 데이터 흐름을 관리합니다. 액션이 발생하면 메시지나 액션객체가 전달되고, 콜백함수를 통해 메시지를 Store 에 전달합니다.
• Store : Application 상태(state)를 저장합니다. 모든 상태변경은 스토어에 의해 이루어지지만, Dispatcher 를 통해 Action을 보내야만 수정이 가능합니다.
• View : 상태를 가져오고 사용자에게 보여주고 입력받을 화면을 렌더링 하는 역할을 합니다.

준비단계

1. Store 는 Dispatcher 에게 Action 이 들어오면 알려 달라고 합니다.
2. Controller View 는 Store 에 최신 상태를 묻습니다.
3. Store 가 Controller View 에게 상태를 주면 렌더링을 하기 위해 모든 Child View 에게 상태를 넘겨줍니다.
4. Controller View 는 Store 에게 상태가 바뀔 때 알려 달라고 합니다.

Data Flow

1. View 는 Action Creator 에게 Action 을 준비하라고 말합니다.
2. Action Creator 는 Action 을 포멧에 맞게 만들어서 Dispatcher 에 넘겨줍니다.
3. Dispatcher 는 들어온 Action 의 순서에 따라 알맞은 Store 로 보냅니다. 각 Store는 모든 Action 을 받게 되지만 필요한 Action 만 골라서 상태를 필요하게 맞게 변경합니다.
4. 상태 변경이 완료되면 Store 는 자신을 구독(subscribe)하고 있는 Controller View에게 그 사실을 알립니다.
5. 연락 받은 Controller View 들은 Store 에게 변경된 상태를 요청합니다.
6. Store 가 새로운 상태를 넘겨주면, Controller View 는 자신 아래의 모든 View에게 새로운 상태에 맞게 랜더링하라고 알립니다.

[React] Redux 사용하기전 알아야할 Flux 개념
Flux로의 카툰 안내서