Flux 패턴

리덕스를 공부하다가 Flux패턴에 대해 알게 되었고 요번 MVC패턴 내용을 정리하다가 연관이 되어 있어서 Flux패턴도 내용을 정리해보려고 합니다.

등장배경

페이스북에서 MVC패턴의 단점을 보완 하기 위해 나온 패턴입니다.
MVC패턴은 양방향 데이터 흐름을 가지고 Flux패턴은 단방향 데이터 흐름을 가지고 있다.

MVC모델은 Model이 업데이트된 내용을 View에게 전달 시켜 업데이트를 시켜주고 View도 Model를 업데이트 시킬수 있다. 이렇게 되면 새로운 기능을 추가하거나 규모가 커질수록 복잡한 데이터 흐름을 가지게 되어 버그가 생겨 날 수 있다.

이런 문제를 해결하기 위해 데이터 흐름을 단방향으로 설정하여 한 방향으로만 흐르도록 하고 유지보수가 용이하게 해주는 Flux를 제작하게 되었습니다.

Flux 패턴

단방향 데이터 흐름을 유지하는 아키텍처 디자인 패턴.
사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하고 Store의 데이터를 변경 후 View에 반영한다.

Action

• 애플리케이션에서 일어나는 이벤트를 나타내는 객체
• Action creator 메서드에서 새로 발생한 Action의 type과 새로운 데이터인 payload를 묶어 Dispatcher에게 전달해줍니다.

Dispatcher

• Action을 받아서 Store에 전달해 주는 역할, 모든 데이터의 흐름을 관리하는 허브 역할
• Store의 데이터를 조작하는 것은 오직 Dispatcher뿐 이다.

Store

• 애플리케이션의 모든 상태와 로직을 관리하고 state가 변경이 될 경우 View에 전달한다.

View

• Flux의 View는 화면에 나타내는 것 뿐만아니라, 리액트 컴포넌트처럼 데이터를 흘려 보내준다.

Flux 패턴 장단점

장점

• 단방향 데이터 흐름을 도입하여 양방향 데이터 바인딩으로 인해 발생되는 데이터 흐름의 복잡성을 해결했고 컴포넌트 간의 의존성을 중여 유지보수가 용이하게 되었습니다.

단점

• 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야한다.