Ajax, REST 등 웹 어플리케이션의 새로운 기술들이 생겨나면서 웹 어플리케이션의 복잡성이 증가하게 되었고 코드 가독성이 좋고, 유지보수가 쉬운 어플리케이션 개발을 위해 다양한 디자인 패턴과 프레임워크가 등장했습니다.
Flux는 Facebook이 클라이언트 측 웹 애플리케이션을 구축하는 데 사용하는 애플리케이션 아키텍처입니다. 단방향 데이터 흐름을 활용하여 React의 구성 가능한 뷰 구성 요소를 보완합니다. 형식적인 프레임워크라기보다는 패턴에 가깝습니다.
MVC 패턴
MVC 패턴은 컨트롤러가 모델 조작하고 모델이 뷰를 업데이트하는 유연성과 재사용성을 높인 디자인 패턴입니다.
MVC 패턴이 클라이언트 사이드에서 사용되면서 뷰와 모델이 상호작용하는 양방향 데이터 바인딩으로 구현되기도 했습니다.
이러한 양방향 데이터 바인딩의 경우 어플리케이션의 복잡도를 높여 확상성이 굉장히 떨어지기 때문입니다. 하나의 모델이나 뷰가 변경되면 그것과 관련된 수 많은 모델과 뷰에 영향을 미치게 되고 이것은 예상치 못한 결과를 가져올 수 있습니다.
Flux 패턴
페이스북에서는 MVC 패턴의 단점을 극복하고자 양방향 데이터 흐름이 아닌 단방향으로 처리하는 아키텍처를 구상했습니다.
액션을 디스패처를 통해 스토어에 전달하고 스토어는 전달받은 액션에 따라 뷰를 변경하기 됩니다.
뷰에서는 상호작용에 대한 응답으로 디스패처로 새로운 액션을 보내어 새로운 작업이 전파되도록 만들 수 있습니다. 모든 데이터는 중앙 허브인 디스패처를 통해 이루어지며 각각의 요소들이 분리되어 동작합니다. 이러한 패턴을 통해서 사용자와의 상호작용을 통해 발생하는 변화를 예측가능하게 되었습니다.
Reference
