Flux Pattern?

Flux는 Facebook에서 클라이언트-사이드 웹 애플리케이션을 만들기 위해 사용하는 애플리케이션 아키텍처다.

(flux 공식 문서 첫 번째 문장)

 

Flux는 MVC Pattern의 문제를 보완하고 좀 더 간단한 흐름으로 짜기 위해 만들어진 것 같다.

여기서 MVC Pattern의 문제가 무엇이냐면 대규모 애플리케이션을 제작할 때 너무 복잡해져 디버깅이나 신입이 코드를 이해할 때 힘들다는 문제이다. (나는 아직 경험해 본적이 없기에 해당 문제점은 Flux 공식 문서에서 가져옴)

이러한 문제를 해결하기 위해 Flux는 모든 데이터 흐름이 단방향으로 흘러가는 비교적 간단한 구조를 이루고 있다.

 

Flux에서 데이터는 흐름은 다음과 같다.

Action -> Dispatcher -> Store -> View

 

각각 뭐하는 것인지 풀어써보자

 

먼저 Action은 Action Creator를 통해 만들어지며 사용자가 어떤 행동을 하여 발생한다. ex) 버튼을 누르거나, 텍스트를 쓰거나

이때 Action으로 인해 Dispatcher로 넘어간다.

 

Dispatcher는 어플리케이션 중앙 허브로 Flux Pattern에서 모든 데이터를 관리한다고 한다.

Dispatcher에서는 등록된 Store에 callback을 실행하며 Store의 데이터를 업데이트한다.

 

Store에서는 모든 데이터를 저장하고 있고 데이터 변경 시 View에 알려주어 rerendering을 한다.

 

View에서는 Store의 데이터를 띄워준다.

또한 Store에 등록한 액션들을 가져와 사용한다.

 

이런 식으로 동작을 하는 패턴인 것 같은데 남에게 이렇다 라고 설명은 해도 왜 이렇게 하였고 정확한 흐름이나 간단한 예제를 짜기는 좀 더 공부해야 할 것 같다.