Flux 패턴

- Flux 패턴이란?

MVC 패턴의 단점을 보완하기 위해 페이스북에서 만든 단방향 데이터 흐름을 위한 패턴 

 

- 왜 사용할까?

MVC 패턴에는 Model과 View가 양방향 패턴에서 나오는 의존성을 가진다는 특성이 있다.

이는 복잡한 Application을 서비스하게 된다면 새로운 기능이 추가 될 때마다 시스템의 복잡도가 높아지고, 예측 불가능한 코드를 만들게 되며, 그렇게 된다면 예측 못할 버그들이 쏟아질 가능성이 높아진다.

* 실제로 페이스북이 가졌던 문제점 중 하나가 알림 버그였다. 페이스북에 로그인 했을 때 새로운 메시지 아이콘 알림이 떠 있지만, 실제로는 아무런 메시지가 없었다. 이를 단방향 데이터 흐름인 Flux 패턴으로 해결 하였다고 한다.

 

Flux 패턴

- 용어 정리

  1. Action : 정확히 말하면 Action Creater Method이며, View에서 사용자 상호작용에 의해 발생한다. 첫 흐름을 발생시키는 요소이며, Dispatcher에게 해당 Action 메시지를 보낸다. Type과 Data(payload)를 가지고 있다.

 

  2. Dispatcher : 들어오는 Action 객체 정보를 받아 실제로 어떤 행동을 할 지 결정되는 곳이며, Flux의 모든 데이터 흐름을 관리하는 중앙 Hub이다. 주로 switch문으로 들어오는 Action 객체를 나누어 처리한다. 미리 정해둔 Action 객체의 Type을 구분하여 미리 작성해둔 명령(Callback 함수)을 실행하여 Store에 데이터를 전달.

     

  3. Store : Application의 모든 상태와 상태를 가공하는 로직을 가지고 있다. Store의 state 변경이 완료 되면 View에 상태가 변경 되었다는 것을 알려 주고, 자신의 컴포넌트 트리에 속해 있는 자식 노드 모두 리렌더링을 한다.

 

  4. View : Store에 저장되어 있는 Data를 화면에 나타내는 것 외에, 자식의 View로 Data를 보내는 View Controller 역할도 한다. Data를 받은 View는 당연히 리렌더링을 한다.