[React] Flux Pattern

🎯 Flux Pattern

• 2014년에 Facebook에서 제안한 웹 애플리케이션 아키텍처 패턴
• Unidirectional(단방향) data flow를 활용해서 데이터의 업데이트와 UI 반영을 단순화한다.
• React의 UI 패턴인 합성 컴포넌트와 어울리도록 설계가 되었다.
• redux, react-redux 라이브러리의 Prior art

 

📝 Flux Pattern vs MVC Pattern

• MVC 패턴에서는, View에서 특정 데이터를 업데이트하면 연쇄적인 업데이트가 일어난다. 앱이 커지면 업데이트의 흐름을 따라가기 힘들다. 즉, 업데이트의 근원을 추적하기 힘들다.
• Flux는 하나의 Action이 하나의 Update만을 만들도록 한다.
• 특정 유저의 인터렉션이 여러 UI 컴포넌트가 사용하는 데이터에 영향을 줄 때, MVC만으로는 앱의 복잡도를 낮추거나 업데이트의 흐름을 따라가기 어렵다.
• data와 업데이트가 한 방향으로 흐르므로 UI의 업데이트를 예측하기 쉽다.
• 하나의 유저 인터렉션에 여러 Action을 생성할 수 있다. 예를 들어 특정 버튼을 클릭했을 때 여러 개의 액션을 만들 수 있다.

 

📝 Flux 구조

• Action -> Dispatcher -> Store -> View 순으로 데이터가 흐른다.
• store는 미리 dispatcher에 callback을 등록해, 자신이 처리할 action을 정의한다.
• action creator는 action을 생성하여 dispatcher로 보낸다.
• dispatcher는 action을 store로 넘긴다.
• store는 action에 따라 데이터를 업데이트 후, 관련 view로 변경 이벤트 발생한다.
• View는 그에 따라 데이터를 다시 받아와 새로운 UI를 만든다.
• 유저 인터렉션이 발생하면 View는 action을 발생한다.