Flux 아키텍쳐 란??

예전 Spring을 배울때, Singleton과 MVC 디자인패턴을 기본으로 다루고 사용했었다.

 

이번엔 react.js 다루며 Flux라는 패턴에 대해 알게되었다.

 

Flux 패턴은 react.js 처럼 데이터 흐름이 단방향으로 전달되는 소프트웨어 개발에서 사용된다.

 

물론 Flux패턴을 사용하지 않아도 개발은 가능하다. 

 

 

 

그림 출처 : https://velopert.com/1225

 

 

위 처럼 컴포넌트 구조가 있다고 가정하고

 

빨간색 컴포넌트(하위) 에서 파란색 컴포넌트(상위) 에 선언 되어있는 객체나 함수를 

 

사용하려한다.

 

react.js에서 하위 컴포넌트로 데이터 전달은 props를 사용하는데 

 

파란색 컴포넌트에서 빨간색 컴포넌트로 바로 접근이 불가능하다.

 

중간에 있는 컴포넌트에서 받은 뒤, 다시 빨간색 컴포넌트로 전달해줘야 한다.

 

소스가 상당히 복잡해질거 같다...

 

 

이처럼, 단방향 데이터 흐름의 소프트웨어에서

 

데이터를 효율적으로 관리하기 위해 Flux 패턴이 나왔다.

 

 

그림 출처 : https://facebook.github.io/flux/docs/in-depth-overview.html#content

 

 

위는 Flux 공식페이지에 올라와 있는 그림

 

여기서 

 

View는 react 컴포넌트,

 

Action은 View에서 사용자가 취한 액션,

 

Dispatcher는 중앙 통제소..? ,

 

Store는 View에 보여질 데이터를 모아놓은 저장소

 

라고 생각...

 

 

 

View에서 어떠한 Action이 발생하면 Dispatcher는 

 

해당 Action을 처리하기 위한 적절한 Store를 찾아서

 

전달한다... 

 

Store는 Dispatcher에서 들어온 요청을 뚝딱뚝딱

 

처리하여 데이터가 변화되었음을 감지하면

 

해당 View를 재 렌더링 한다.

 

 

 

그림 출처 : https://facebook.github.io/flux/docs/in-depth-overview.html#content

 

 

 

 

 

좀 더 자세히 알고 싶다면 Flux 공식페이지에 예제가 있으니

 

직접 해보면 데이터 관리가 어떻게 이루어지는지 

 

알 수 있다.

 

 

Flux 공식페이지  https://haruair.github.io/flux/

 

 

 

 

#잘못된 점은 언제든지 댓글로 달아주세요~