비실이의 개발 성장기

Flux 아키텍쳐 란?? 본문

디자인패턴

Flux 아키텍쳐 란??

DubbingLee 2017. 2. 12. 13:25

예전 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/





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





'디자인패턴' 카테고리의 다른 글

단일 책임 원칙 (SRP) 이란??  (0) 2017.03.12
Flux 아키텍쳐 란??  (0) 2017.02.12
리스코브 치환의 원칙(LSP) 에 대해 알아보자  (0) 2017.02.11
0 Comments
댓글쓰기 폼