Flux 패턴

Flux는 사용자 입력을 기반으로 Action이 생성되고 Dispatcher 이를 받아와 해석한 후 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처이다.

 

단방향으로 데이터 흐름을 일관성 있게 관리함으로 예측가능성을 높힌다.

 

Flux 는 세 가지 핵심 원칙을 기반으로 한다.

 

1. 단방향 데이터 흐름 : Flux 애플리케이션의 데이터는 action, dispatcher, store, view로 한방향으로 흐른다. 이로 인해 데이터의 흐름을 체계적으로 유지하고 애플리케이션의 상태를 더 쉽게 추론할 수 있다.
2. 중앙 집중식 제어 : 애플리케이션 상태의 제어는 dispatcher에서 중앙 집중식으로 이루어진다. dispatcher는 view에서 작업을 수신하여 적절한 장소로 보낸다. 이렇게 하여 상태 관리의 일관성을 유지할 수 있다.
3. Immutable Data : Flux 애플리케이션의 데이터는 불변이다. 즉 상태를 직접 변경할 수 없다. 변경이 필요할 때 새 값을 생성하여 이전 상태가 대체된다. 변경 상태를 추척하고 데이터의 무결성을 유지하기 쉽다.

 

 

중앙 집중식 제어에 대해서 추가 설명을 덧붙이면, flux의 dispatcher는 MVC의 Controller 같은 역할이라고 볼 수 있다. 사용자 action을 감지하는 것도, store의 데이터를 조작하는 것도 dispatcher를 사용해야지만 가능하다.

Redux에 대한 이야기를 할 때 flux 패턴에 대한 이야기가 많이 나오지만 핵심 원칙에 일부는 React의 동작과도 닮아있다. 이 원칙들이 Redux의 인기 비결이 아닐까 싶다.

 

flux 동작 방식

1. view : view는 사용자 인터페이스를 렌더링하고 사용자 캡쳐하는 역할을 한다. 사용자가 view와 상호 작용하면 action이 트리거 된다.
2. action : action은 이벤트를 설명하는 javaScript 객체이다. action이 트리거 되면 dispatcher로 전송된다. 타입 프로퍼티가 포함되어있다.
3. dispatcher : dispatcher는 flux 어플리케이션의 중앙 허브(controller)이다. view에서 action을 수신하여 적절한 store로 보낸다. view와 store 간에 직접적인 연결이 없도록 보장한다.
4. store : 애플리케이션의 상태를 관리(저장)하는 저장소이다. dispatcher로 작업을 수신하고 그에 따라 상태를 업데이트 하고 변경되었음을 view에 알린다.