2023. 4. 19. 13:55ㆍ카테고리 없음
MVC패턴
FLUX 패턴을 알기 전 MVC 패턴을 먼저 알아보자!
MVC패턴은 Model, View, Controller로 구성되어 있으며 양방향 데이터 흐름(양방향 바인딩)을 가진다.
그림처럼 Model과 View에서 양방향 데이터 바인딩이 일어난다.
이 구조는 사용자의 입력에 따라 뷰가 모델을 업데이트 해야하고, 하나의 모델이 또 다른 모델을 업데이트해야 해서 프로그램의 내부구조가 복잡해질 수 있다.
내부 구조를 파악하기 어려운 양방향 데이터 바인딩 대신 단방향 데이터 바인딩을 사용하기로 했다.
단방향 데이터 바인딩을 사용하며, 새로운 데이터를 넣으면 처음부터 다시 시작되는 구성을 FLUX패턴이라고 한다.
FLUX패턴은 Action, Dispatcher, Store, View로 이루어져 있고
데이터는 Dispatcher -> Store -> View 순서로 흐르고 View에서 입력이 발생하면 Action을 통해 Dispatcher로 향한다.
Action이 발생하면 Dispatcher가 해석한 후 Store에 저장된 상태를 변경하고 그 결과가 View로 전달된다.
FLUX 패턴의 구성요소
1) Action
특정 행동을 하기 위한 액션, 일반적으로 타입과 데이터를 담고 있다.
2) Dispatcher | Store에 접근하기 위한 단계
Action이 발생하면 Dispatcher로 메시지나 액션 객체가 전달되고 특정 callback처리가 이루어진다.
Dispatcher는 이러한 메시지나 액션 객체를 콜백 함수를 통해 Store로 전달한다.
3) Store
애플리케이션의 상태를 저장한다. 모든 상태 변경은 Store에 의해 결정된다.
4) View
Store에서 상태를 가져와 보여주고 사용자로부터 입력 받을 화면을 보여준다.
참고
https://medium.com/hcleedev/web-react-flux-%ED%8C%A8%ED%84%B4-88d6caa13b5b