[React] Flux Pattern

React – A JavaScript library for building user interfaces

 

 

 Flux Pattern 

 

 

▶  Flux Pattern 이란?

 

2014년에 Facebook에서 제안한 웹 애플리케이션 아키텍처 패턴

 

-  Unidirectional data flow를 활용, 데이터의 업데이트와 UI 반영을 단순화한다.

-  React의 UI 패턴인 합성 컴포넌트와 어울리도록 설계되었다.

-  redux, react-redux 라이브러리의 Prior art.

 

 

 

 

 

▶  Flux Pattern   vs.   MVC Pattern

 

 

MVC Pattern

 

애플리케이션을 Model, View, Controller로 분리하여 개발하는 소프트웨어 디자인 패턴 중 하나

 

-  MVC 패턴에서는 View에서 특정 데이터를 업데이트하면 연쇄적인 업데이트가 일어난다.

-  앱이 커지면 업데이트의 흐름을 따라가기 힘들다.

-  특정 유저의 인터렉션이 여러 UI 컴포넌트가 사용하는 데이터에 영향을 줄 때 MVC만으로는 앱의 복잡도를 낮추거나 업데이트의 흐름을 따라가기 어렵다.

 

 

 

Flux Pattern

 

-  Flux는 하나의 Action이 하나의 Update만을 만들도록 한다. (하나의 유저 인터렉션 당 하나의 Update)

-  data와 업데이트가 한 방향으로 흐르므로 UI의 업데이트를 예측하기 쉽다.

 

하나의 유저 인터렉션이 무조건 하나의 업데이트만 만들 수 있는 것은 아니다.

예를 들어, 특정 버튼을 클릭했을 때 여러개의 액션을 만들 수 있다.

 

 

 

 

 

▶  Flux 구조

 

Action  →  Dispatcher  →  Store  →  View 순으로 데이터가 흐른다.

 

-  store  :   미리 dispatcher에 callback을 등록해 자신이 처리할 action을 정의

-  action  :  creator는 action을 생성하여 dispatcher로 보냄

-  dispatcher  :  action을 store로 넘김

 

유저 인터렉션이 발생하면 View는 action을 발생

→  store는 action에 따라 데이터를 업데이트 후 관련 view로 변경 이벤트 발생

→  view는 그에 따라 데이터를 다시 받아와 새로운 UI를 만듦

 

이미지출처 : 엘리스 React 심화 Ⅰ - 04 상태관리 강의자료

 

 

 

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.