🍎 Flux 패턴
Flux 패턴은 소프트웨어 애플리케이션의 상태 관리와 데이터 흐름을 다루는 디자인 패턴 중 하나이다.
🌳 등장하게 된 이유
기존 보편적으로 사용하던 MVC 패턴(Model, View, Controller)이 View가 다양한 상호작용을 위해 여러 개의 Modal을 동시에 업데이트하고 Model 역시 여러 개의 View에 데이터를 전달하는 상황 발생.
→ 많은 의존성을 가지면 Model의 개수가 많아질수록 각 Model에서 발생한 이벤트가 애플리케이션 전체로 퍼져나갈 때 이를 예측하기 힘들어짐. 복잡한 데이터 흐름
MVC 패턴
Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리.
Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여짐.
사용자가 View를 통해 데이터를 입력하면 View 역시 Model을 업데이트할 수 있다(양방향)
🌳 Flux 패턴에 대하여
- 사용자 입력을 기반으로 Action 생성
- Action을 Dispatcher에 전달
- Store의 데이터를 변경
- View 반영
🌱 Flux 패턴 요소
액션 (Action): 사용자 상호작용 또는 시스템 이벤트와 같은 외부 요인으로 인해 애플리케이션 상태, 데이터를 변경하기 위해 Dispatcher에게 전달되는 객체 또는 이벤트.
디스패처 (Dispatcher): 액션을 받아 상태 변경을 관리하고, 이벤트를 등록한 스토어에 전파하는 중앙 허브 역할을 하는 컴포넌트.
스토어 (Store): 애플리케이션의 상태와 비즈니스 로직을 포함하는 곳으로, 상태를 변경하고 앱의 뷰를 업데이트하기 위한 데이터 소스.
뷰 (View): 사용자 인터페이스를 표시하고 사용자 입력을 처리하는 부분.
참고 Blog
https://bestalign.github.io/translation/cartoon-guide-to-flux/
https://taegon.kim/archives/5288
https://velog.io/@andy0011/Flux-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80
