Flux
Flux는 페이스북에서 MVC의 문제를 해결할 목적으로 고안한 애플리케이션 아키텍처이다.
Flux 어플리케이션은 다음 핵심적인 세가지 부분(Dispatcher, Stores, Views(React 컴포넌트))으로 구성되어있디.
단, 여기서 말하는 뷰는 MV*의 뷰와는 달리 스토어에서 데이터를 가져오는 한편 데이터를 자식 뷰로 전달하기도 하는 일종의 뷰-컨트롤러로 보아야 한다.
Flux 아키텍처의 가장 큰 특징으로는 '단방향 데이터 흐름'을 들 수 있다. 데이터의 흐름은 언제나 디스패처(Dispatcher)에서 스토어(Store)로, 스토어에서 뷰(View)로, 뷰에서 액션(Action)으로 다시 액션에서 디스패처로 흐르기때문에 예측할 수 있다.
액션 생성자
모든 변경사항과 사용자와의 상호작용을 할 때 거쳐야하는 액션의 생성을 담당하고 있다.
Flux에서 어플리케이션의 상태를 업데이트하고 싶을 때는 액션을 생성해야합니다.
액션 생성자가 액션 메시지를 생성하면 디스패치에 이를 전달합니다.
디스패쳐
디스패쳐는 액션과 스토어를 연결시켜주는 역할을 합니다.
Flux의 디스패쳐는 다른 아키텍처들과는 조금 차이를 보입니다.
그것은 바로 액션 타입과는 관계없이 등록된 모든 스토어로 보낸다는 것입니다.
다시말해서, 스토어가 특정 액션만 구독하지 않고 모든 액션을 받은 뒤 처리여부를 결정한다는 이야기입니다.
스토어
스토어는 애플리케이션 내의 모든 상태와 그와 관련된 로직을 가지고 있습니다
상태 변경은 반드시 스토어에 의해서 업데이트 해야되며, 상태 변경을 위한 요청을 스토어에 직접 보낼 순 없습니다.
스토어에는 접근자(getter)는 있지만, 설정자(setter)는 존재하지 않으므로, 액션 생성자를 거쳐서 와야합니다.
다시 말해서, 정해진 절차를 거쳐야만 상태를 변경할 수 있다는 것입니다.
위에서도 설명했듯이, 만약 스토어가 디스패쳐에 등록되어 있다면, 모든 액션을 받습니다.
스토어에서는 액션을 구별하고 액션에 따른 처리를 해줍니다.
만약 스토어에서 상태 변경이 완료가 되면, 변경 이벤트를 발생시킵니다.
이를 통해서 뷰는 상태가 변경되었다는 것을 알게 됩니다,
뷰
뷰는 상태를 가져오고 유저에게 보여주고 입력받을 화면을 렌더링합니다.
컨트롤러 뷰는 변경 이벤트를 받으면, 자신의 아래에 있는 모든 뷰에게 새로운 상태를 넘겨주는 역할을 합니다.
동작 순서
준비
애플리케이션이 초기화 될 때 한번의 준비 과정을 거칩니다.
이 과정에서 스토어는 디스패쳐에 컨트롤러 뷰에게 최신 상태를 전달하고,
이를 받은 컨트롤러 뷰는 렌더링을 위해서 모든 자식 뷰에게 넘겨 줍니다.
실제 데이터의 흐름
뷰는 사용자가 입력한 정보를 가지고 액션을 만들라고 액션 생성자에게 전달합니다.
액션 생성자는 액션을 만들고 이를 디스패쳐에 전달합니다.
디스패쳐는 들어온 액션을 순서대로 해당하는 스토어에 전달합니다. 이때 말씀드렸다 싶이 스토어는 모든 액션을 받지만, 필요한 액션만 골라서 처리합니다.
상태가 변경이 되면 스토어는 컨트롤러뷰에게 변경 이벤트를 전달합니다.
컨트롤러 뷰는 최신 상태를 받아 오고 이를 모든 뷰에 전달해서 렌더링을 하라고 전달합니다.
Last updated
