flux pattern

  • MVC 패턴의 한계를 느끼고 페이스북이 만든 디자인 패턴입니다.

    • MVC 패턴은 어플리케이션이 고도화되고 복잡해질수록 V와 C의 관계가 복잡해집니다.

    • 이에 따라 버그도 수정하기 어렵고

    • 데이터의 흐름도 알아보기가 어려워집니다. 예를 들면 뷰에서 발생한 변경이 모델에 영향을 끼치기도 하고, 모델에서 발생한 변경이 뷰에 영향을 끼치기도 해서 데이터를 일관성있게 뷰에 공유하기가 어려워집니다.

구성

  • Action : 마우스 클릭이나 글을 쓰는 등의 이벤트를 의미합니다.

    • 이벤트가 발생했을 때 action 객체를 만들어서 dispatcher 에게 전달합니다.

  • Dispatcher : 들어오는 action 객체 정보를 기반으로 어떤 행위를 할지 결정합니다.

    • 보통은 action 객체의 타입을 기반으로 먼저 만들어둔 로직을 선택해 수행합니다.

  • Store : 데이터입니다. 상태를 담고있는 계층입니다.

장점

  • 데이터의 일관성이 증대됩니다.

  • 그렇다보니 버그를 찾기가 쉬워지고

  • 데이터의 흐름을 파악하기도 쉬워집니다.

  • 단위테스팅 역시 쉬워집니다.

Last updated