Flux 패턴
Flux 패턴이란?
Flux는 Facebook에서 클라이언트 사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. 기존 MVC 패턴의 양방향 데이터 흐름이 아닌 단방향 데이터 흐름을 활용해 View Component를 구성하는 React를 보완하는 역할을 한다.
Flux는 3가지 부분으로 구성되어있다. 물론 Controller로 포함되어있다.
- Dispatcher
- Store
- View
필요성
이해를 하기 위해서는 기존 구조와 비교할 필요가 있다.
Client Side Web Application에서 MVC 패턴의 기본 구조이다.
모델과 뷰가 양방향으로 이루어져있다. 지금 그림에서는 보기 편하지만 만약 그 수가 늘어난다면 어떻게 될까
상당히 절망적이다. 이 구조를 그리는 나도 절망적이었다.
이 처럼 하나의 View가 여러개의 Model을 변경하고 여러 Model과 양방향으로 상호작용한다. 데이터의 흐름을 예측하기 어렵고 눈 깜짝할 사이에 복잡해진다.
구조
먼저 설명했듯 Flux 패턴은 3가지의 부분으로 나누어져있고 데이터는 단방향의 흐름을 갖는다.
- Action : 데이터를 바꾸기 위한 동작에 대한 설명
- Dispatcher : 각 Action에 따라 Store의 데이터를 변경
- Store : 데이터를 저장하고 데이터가 변경이 되었을 때 View를 갱신한다.
- View : Store의 데이터를 표현한다.
위 구조는 제일 간단한 기본이 되는 모델이다. Disptcher와 Store, View는 각각 독립적인 노드이며 입출력이 완전히 구분된다.
동작
View에서 사용자의 상호작용에 응답하기 위해 새로운 action을 만들어 사용한다.
Flux는 단방향으로 데이터가 흐른다.
View에서 사용자가 상호작용을 할 때 중앙의 Dispatcher를 통해 Action을 전파한다.
Action을 Dispatcher에 전달하면 등록해둔 callback을 통해 모든 store에 전송이 되고 action에 대한 응답으로 store가 스스로를 갱신한 뒤에는 자신이 변경되었다고 모두에게 알린다.
controller-view는 변경 이벤트를 듣고 새로운 데이터를 store에서 가져온 뒤 모든 트리에 있는 자식 view에게 새로운 데이터를 제공한다.
결론
Flux 패턴은 단방향 흐름을 유지하여 React 등 뷰 라이브러리와 함께 사용될 때 일관성 있는 데이터 흐름을 구현하는 데에 매우 유용하다.
Redux는 Flux 패턴을 사용하여 단방향 데이터 흐름을 유지하고 데이터 일관성과 예측 가능성을 유지한다.
Redux를 살펴보고 Flux 패턴에 대해 더 이해하고 프로젝트의 복잡성은 낮추고 유지보수성을 높여보자.