Flux #

Flux는 Client-Side 웹 어플리케이션을 만들기 위해 Facebook에서 개발한 JavaScript 라이브러리로 React(ReactJS)를 보조하기 위한 아키텍쳐이다. Flux의 핵심개념인 Action(Dispatcher) - Store - View 로 진행되는 단방햔 데이터 흐름을 통해 React의 UI 컴포넌트간의 데이터 흐름을 보조하며, React Component 간의 데이터 전달 및 Component로 부터 발생하는 함수 Call에 대한 Callback 시점에도 관여한다. Flux는 Client-Side 내에서의 데이터흐름을 제어하기 위한 아키텍쳐로 Sever-Client 간에 동작하는 MVC 패턴(Model-View-Contol)의 Model이나 Control과 혼동하면 안된다.

단방향 데이터 흐름 #

단방향 데이터 흐름은 앞서 설명한바와 같이 Flux의 가장 핵심적인 개념으로 Action(Dispatcher) - Store - View 순으로 데이터의 흐름을 제어한다. 이러한 흐름은 "데이터를 올바르게 다루자" 라는 취지로 개발되었다. 기존의 MVC 모델에서 특정 뷰에서 데이터가 업데이트 될 때 마다 뷰를 업데이트 하기 위해서는 어려운 부분이 많다. 상태를 지속적으로 업데이트 하기 위해서는 데이터의 변경사항을 지속적으로 체크해야 하며, 데이터가 업데이트가 될 때마다 데이터와 관련된 뷰들의 UI 변경부분도 업데이트를 수행해야 하기 때문이다. 체크해야할 데이터가 늘어 날수록 이를 "확인"-> "변경 사항 업데이트" 하기 위한 Overhead 는 증가하며, 데이터에 대한 뷰의 의존성 역시 증가하게 된다.

Action - Dispatcher - Store - View #

위 그림은 Flux Document page(http://haruair.github.io/flux/docs/overview.html) 에서 Flux 데이터 흐름을 설명하기 위한 자료이다. Action, Store, View는 서로 입력과 출력이 완전히 분리되어 있으며, View에서는 웹에서 표현되는 화면을 다루며, Action 에서는 View에서 발생하는 이벤트에 대한 Handler역할을 수행한다. Store에서는 Client 단에서 가지고 있어야 할 데이터들을 state에 저장하는 역할을 수행한다. 즉, Action을 통해 View로부터 변경 요청이 오게되면 Store에서 이를 처리하고 저장한다. 이때 변경된 내용을 View에 다시 rendering 하여 반영한다. 이에 대해 좀더 세부적으로 설명하면 다음과 같다.

기본적으로 View에서는 Time Event, 사용자와의 Interaction등에 의해 Action 발생한다. 이러한 Action가 View 곳곳에서 산발적으로 발생하게 되는데 이를 ActionCreator 형태로 Dispatch에 전달한다.

Dispatcher에서는 "데이터 허브"라고 표현되며, 모든 데이터의 흐름이 Dispatcher를 통해 흐른다. Dispatcher는 모든 Action으로부터 모든 Store에 Callback 형태로 Action을 등록하고 이를 통해 Store는 관련된 Action으로 부터 데이터를 전달 받는다. 즉 Dispatcher 를 이용해 각 Action과 관련된 Store들을 Callback 연결하므로써 어떠한 Action 이 발생하면 Store에서 데이터 이를 인지하고 관련된 Store를 업데이트한다.

이후 Store는 변화를 수행된 것을 Controller-views에 알려준다. Controller-view는 Store로부터 Store가 변경되었다는 것을 들으면, Store에 저장된 데이터들을 가지고와 변경된 부분에 대한 컴포넌트 트리를 업데이트 하고 View를 다시 랜더링 한다.

Flux의 활용 #

Single page와 같이 Event Action이 많은 페이지나 Components단위로 이벤트가 조작되는 React에서의 Flux의 활용은 상당하다. 상호 작용이 많은 페이지의 경우 각종 Event들로 인해 하나의 Veiw가 수많은 Envent Function에 의해 복잡하게 제어되는 경우가 많다.

Flux의 경우 이러한 이벤트 흐름을 단방향으로 흐르게 하므로써 특정 Event에 대한 Logic을 순차적으로 파악하기 쉽다는 장점이 있다. 이러한 흐름은 각 View Component의 의존성을 낮추고 프로그래밍 할 때 실수를 줄여준다.

하지만 Flux의 경우 기존의 개발 패턴과 상이하여 진입장벽이 높아지고 Flux를 활용한 개발에 익숙하지 않은 사람에게는 전체 시스템을 파악하기 어려워 질 수 있다. 또한 Flux 특성상 Action 및 데이터 처리가 한곳에서 집약적으로 처리되고 처리해야 하는 단계가 추가되었기 때문에 각각의 Event를 추적하기는 쉬우나, 오히려 전체 코드를 파악하는데에는 가독성을 떨어뜨리게 된다는 단점도 존재한다.

Incoming Links #

Related Data Sciences (DataScience 0) #

• ReactJS

Suggested Pages #

• 0.869 ReactJS/Create-React-App
• 0.024 AngularJS
• 0.024 JSX
• 0.024 BackboneJS
• 0.012 프레임워크
• 0.009 HTML
• 0.007 JavaScript
• 0.007 jQuery
• 0.006 JSON
• 0.006 뷰
• More suggestions...