Table of contents
Flux
학습을 위해 여러 글을 참고하여 정리한 글입니다.
Facebook에서 클라이언트-사이드 웹 애플리케이션을 만들기 위해 사용하는 아키텍처이다.
MVC 패턴의 문제점을 보완할 목적으로 고안되었다.
Flux 가장 큰 특징은 단방향 데이터 흐름(unidirectional data flow)이다.
단방향 데이터 흐름(unidirectional data flow)
Action → Dispatcher → Store → View → Action
Flux의 데이터 흐름은 언제나 디스패처(Dispatcher)에서 스토어(Store)로, 스토어에서 뷰(View)로, 뷰에서 액션(Action)으로 다시 액션에서 디스패처로 흐른다.
구성 요소
- Dispatcher
- Store
- View
- Action
Flux의 구성 요소
Action
액션(action)은 디스패처의 특정 메소드를 실행하여 스토어에 변화를 일으키기 위해 전달하는 데이터의 묶음이다.
액션은 보통 액션 타입 또는 액션 아이디라 부르는 고유한 키와 관련 데이터를 포함하는 객체로 만들어진다.
참고 - FSA(Flux Standard Action)
디스패치에 전달할 액션 객체는 대체로 액션 생성자(Action creator)라는 함수 또는 메소드를 통해 만들어진다. (대부분 라이브러리를 사용한다)
Dispatcher
디스패처(Dispatcher)는 Flux 애플리케이션의 모든 데이터 흐름을 관리하는 허브 역할을 한다.
액션이 발생하면 디스패처로 메시지(또는 액션 객체)가 전달되고 디스패처는 디스패처에 등록된 콜백 함수를 통해 이 메시지를 스토어에 전달한다.
다른 구성요소와 달리 디스패처는 전체 애플리케이션에서 한 개의 인스턴스만 사용한다.
- 중앙에서 데이터의 흐름을 관리하는 허브
- 콜백을 통해 액션을 전달
Store
스토어(Store)는 애플리케이션의 상태를 저장한다.
스토어는 자신을 디스패처에 등록하고 콜백을 제공한다.
(이 callback은 action을 파라미터로 받는다)
스토어에 등록된 콜백의 내부에서는 switch문을 사용한 액션 타입 을 활용해서 액션을 해석하고 스토어 내부 메소드에 적절하게 연결될 수 있는 훅을 제공한다.
(결과적으로 액션은 디스패처를 통해 스토어의 상태를 갱신한다)
스토어가 업데이트 된 후, 상태가 변경되었다는 이벤트를 중계하는 과정으로 뷰에게 새로운 상태를 보내주고 뷰 스스로 업데이트하게 만든다.
- 애플리케이션의 상태와 로직을 포함하고 있다.
- 디스패치로 부터 메시지를 수신하기 위해 콜백 함수를 디스패치에 등록해야 한다.
- 콜백 함수는 함수에 전달된 메시지에 따라 내부에서 스위치 문을 사용해 메시지(액션)를 해석하고 특정 동작을 수행한다.
MVC 패턴의 모델과 비슷하지만 다르다
ORM(Ojbect-relational Mapping) 스타일로 데이터를 다루지 않는다.
MVC의 모델은 어떤 객체를 모델링하는데 주력하고 있다면, Flux의 스토어는 상태를 다룬다는 개념으로 접근해야 하므로 무엇이든 저장할 수 있다. 그리고 대체로 단순한 자바스크립트 Object로 구성된다.
View
Flux에서의 뷰(view)는 화면을 표시하는 것은 물론 컨트롤러의 성격도 가지고 있다.
중첩된 뷰 레이어의 최상위 뷰는 스토어에서 데이터를 가져와 이를 자식 뷰로 배분하는 역할을 하고 있기 때문에 컨트롤러-뷰(controller-view)라고도 부른다.
컨트롤러-뷰가 있다는 것은 달리 말하면 곧 자식 뷰에서는 직접 데이터를 가져오는 대신 props 형태로 상위 뷰에서 전달받는 방식을 주로 사용한다는 의미도 된다. 물론 필요에 따라 하위 뷰에서도 직접 스토어의 데이터를 가져오기도 한다.
뷰는 관련 스토어의 변경 사항을 감지할 수 있는 이벤트 리스너를 스토어에 등록하고, 스토어에 변경 사항이 발생하면 이를 뷰에 반영한다.
note
Flux와 MVC 비교 정리하기
Flux와 Redux 비교 정리하기
(redux는 flux의 개념을 차용한 것이지 같은 것이 아니라는 것을 중점으로)
