Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴

등장 배경

페이스북은 Flux구조가 왜 필요했을까?

대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 ***예측가능성(Predictability)***를 높이기 위함이다.

기존 애플리케이션에서 보편적으로 사용하던 MVC 패턴

Untitled

MVC는 Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)한다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여진다.

또 중요한 점은 사용자가 View를 통해 데이터를 입력하면 View 역시 Model을 업데이트 할 수 가있어 데이터가 양방향으로 흐를 수 있다.

문제는 애플리케이션의 규모가 커지고 커져서 다음과 같은 구조를 가지게 될 경우이다.

Untitled

View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업딩트하고 Model 역시 여러 개의 View에 데이터를 전달하는 상황이 발생하게된다.

한 Modeldl 업데이트되면 그에 따라 View가 업데이트되고, 업데이트된 View가 또 다른 Model을 업데이트하는 식의 복잡한 데이터 흐름을 가지게 된다.이렇게 많은 의존성을 가지면 Model의 개수가 많아질 수록 각 Model에서 발생한 이벤트가 애플리케이션 전체로 퍼져나갈 때 이를 예측하기 힘들어 진다.

페이스북은 “MVC는 정말 눈 깜짝할 사이에 복잡해진다”고 말하며 이 문제의 해결 방안으로 단방향 데이터 흐름을 가지는 Flux 패턴을 고안했다고함.

Flux 패턴

Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처