Flux 시작하기

Flux

기존에 많이 사용하던 MVC 패턴의 문제점을 느끼고 Facebook에서 개발한 하나의 개발 패턴이다.

기존의 MVC패턴은 개발한 코드가 늘어날수록 흐름을 예측하기 어려워지고 데이터의 흐름이 복잡해지는 문제점이 있었다.

위 이미지 처럼 하나의 컨트롤러는 많은 Model과 View를 참조하며 Model과 View 사이에서도 많은 참조 관계가 물려 있다.

이렇게 되어가다보면 결국엔 개발시에 예측할 수 없는 상태가 된다.

그래서 Flux가 나왔다.

Flux는 단순한 데이터 흐름으로 예측할 수 있는 상태의 코드를 만들기 위해 만들어진 패턴이다.

위 사진이 Flux 패턴의 구조이다.

Flux는

• Action
• Dispatcher
• Store
• View

로 이루어져 있다.

기본적인 가정으로 위 구조를 설명해보면

1. View에서 데이터의 변경이 일어나면 Action을 생성한다.
2. Action이 생성되면 Watching하고 있던 Dispatcher에서 반응한다.
3. Dispatcher에서는 해당 Store가 해당 Action으로 등록한 Callback을 실행해준다.

Flux 패턴의 기본적인 Flow다. 아주 심플하고 단방향으로 흐른다.

View에서 Data를 변경하려면 무조건 Action 통하는 방법밖에 없어서

데이터의 흐름도 예외가 없다.

이제 각 Flux를 이루고 있는 각 요소들을 자세히 알아보자.