한국어
팁/강좌/노하우
 

테크 Flux 어플리케이션 아키텍쳐

makersweb 2018.01.30 09:25 조회 수 : 72

클라이언트-사이드 웹 어플리케이션을 만들기 위해 단방향 데이터 흐름을 활용하는 어플리케이션 아키텍쳐다. 

 

Flux 어플리케이션은 다음 핵심적인 세가지 부분으로 구성되어 있다: Dispatcher, Stores, Views(React 컴포넌트). Model-View-Controller와 혼동해서는 안된다. Controller도 물론 Flux 어플리케이션에 존재하지만 위계의 최상위에서 controller-views - views 관계로 존재하고 있다.

 

Flux는 MVC와 다르게 단방향으로 데이터가 흐른다. React view에서 사용자가 상호작용을 할 때, 그 view는 중앙의 dispatcher를 통해 action을 전파하게 된다. 어플리케이션의 데이터와 비지니스 로직을 가지고 있는 store는 action이 전파되면 이 action에 영향이 있는 모든 view를 갱신한다. 이 방식은 특히 React의 선언형 프로그래밍 스타일 즉, view가 어떤 방식으로 갱신해야 되는지 일일이 작성하지 않고서도 데이터를 변경할 수 있는 형태에서 편리하다.

 

구조와 데이터 흐름

Flux 어플리케이션에서의 데이터는 단방향으로 흐른다:

flux-simple-f8-diagram-1300w.png

 

 

단방향 데이터 흐름은 Flux 패턴의 핵심인데 위 다이어그램은 Flux 프로그래머를 위한 제일의 멘탈 모델 이 된다.

 

view는 사용자의 상호작용에 응답하기 위해 새로운 action을 만들어 시스템에 전파한다:

flux-simple-f8-diagram-with-client-action-1300w.png

 

모든 데이터는 중앙 허브인 dispatcher를 통해 흐른다. action은 dispatcher에게 action creator 메소드를 제공하는데 대부분의 action은 view에서의 사용자 상호작용에서 발생한다. dispatcher는 store를 등록하기 위한 콜백을 실행한 이후에 action을 모든 store로 전달한다. 등록된 콜백을 활용해 store는 관리하고 있는 상태 중 어떤 액션이라도 관련이 있다면 전달해준다. store는 change 이벤트를 controller-views에게 알려주고 그 결과로 데이터 계층에서의 변화가 일어난다. Controller-views는 이 이벤트를 듣고 있다가 이벤트 핸들러가 있는 store에서 데이터를 다시 가져온다. controller-views는 스스로의 setState() 메소드를 호출하고 컴포넌트 트리에 속해 있는 자식 노드 모두를 다시 랜더링하게 한다.

 

Action creator는 라이브러리에서 제공하는 도움 메소드로 메소드 파라미터에서 action을 생성하고 type 을 설정하거나 dispatcher에게 제공하는 역할을 한다.

모든 action은 store가 dispatcher에 등록해둔 callback을 통해 모든 store에 전송된다.

action에 대한 응답으로 store가 스스로 갱신을 한 다음에는 자신이 변경되었다고 모두에게 알린다.

controller-view라고 불리는 특별한 view가 변경 이벤트를 듣고 새로운 데이터를 store에서 가져온 후 모든 트리에 있는 자식 view에게 새로운 데이터를 제공한다.

 

이와 같은 구조는 우리의 어플리케이션이 함수형 반응 프로그래밍(functional reactive programming) 이나 더 세부적으로 데이터-흐름 프로그래밍(data-flow programming) 또는 흐름 기반 프로그래밍(Flow-based programming) 을 연상하게 한다는 사실을 쉽게 떠올리게 한다. 즉 데이터의 흐름이 양방향 바인딩이 아닌 단일 방향으로 흐른다. 어플리케이션의 상태는 store에 의해 관리를 해서 어플리케이션의 다른 부분들과 결합도를 극히 낮춘 상태로 유지될 수 있다. store의 사이에서 의존성이 생긴다고 해도 dispachter에 의해 엄격한 위계가 유지되어 동기적으로 갱신되는 방식으로 관리된다.

 

양방향 데이터 바인딩은 연속적인 갱신이 발생하고 객체 하나의 변경이 다른 객체를 변경하게 되어 실제 필요한 업데이트보다 더 많은 분량을 실행하게 된다. 어플리케이션의 규모가 커지면 데이터의 연속적인 갱신이 되는 상황에서는 사용자 상호작용의 결과가 어떤 변화를 만드는지 예측하는데 어려워진다. 갱신으로 인한 데이터 변경이 단 한 차례만 이뤄진다면 전체 시스템은 좀 더 예측 가능하게 된다.

 

원문 및 자세한 정보 : https://haruair.github.io/flux/docs/overview.html#content

번호 제목 글쓴이 날짜 조회 수
35 故박경리 작가 손글씨, 무료 글꼴로 공개 makersweb 2019.01.05 11
34 저렴한 비용으로 만든 비트코인 하드웨어 지갑(Cold storage) file makersweb 2018.12.27 8
33 어떤 프로젝트, 이슈관리 도구를 써야할까? updatefile makersweb 2018.02.27 1131
32 웹기반 리눅스(유닉스) 시스템 관리 도구 - webmin file makersweb 2018.02.19 84
31 한글 무료 폰트 모음 makersweb 2018.02.03 66
30 재밌는 퀴즈로 쉐이더 프로그래밍 배우기 file makersweb 2018.02.01 112
» Flux 어플리케이션 아키텍쳐 file makersweb 2018.01.30 72
28 죄와 벌 (완역본) Prestuplenie i nakazanie Pjk 2011.02.13 4331
27 위대한 설계-THE GRAND DESIGN [1] Pjk 2010.12.14 3337
26 연금술사, The Alchemist. Pjk 2010.05.14 5132
25 여행의 기술 (The)art of travel file Pjk 2009.09.01 4391
24 신 (Le Souffle des Dieux) [1] 박종규 2009.08.21 4188
23 지식e (가슴으로 읽는 우리시대의 智識) 시즌1 박종규 2009.08.20 4281
22 백제도, 동학군도 품어안은 ‘붉은 비단’ [1] file Pjk 2009.09.09 1839
21 적정기술(Appropriate Technology) makersweb 2017.01.14 590
20 Microsoft 무료기술서적 <링크> makersweb 2014.03.16 1308
19 [정보] PHP (및 기타 언어)로 일정주기로 실행 Pjk 2014.02.09 1740
18 foobar 에서 앨범 아트를 표시해 주기위한 파일명 Pjk 2011.02.12 5851
17 자전거 설계cad link Pjk 2010.11.21 7592
16 무료 백신 - MS 시큐리티 에센셜 Microsoft Security Essentials Pjk 2010.06.04 4095