Redux

  • 페이스북에서 React와 함께 소개한 flux 아키텍처 구현한 라이브러리
  • 컴포넌트끼리 데이터 교류 및 state 관리를 쉽고 효율적으로 할 수 있게 해 주는 라이브러리

Flux

Action -> Dispatcher -> Store -> View -> Action -> Dispatcher

  • 일종의 아이디어라고 보면 된다. 라이브러리, 프레임워크가 아니다. 그냥 추상적인 개념이다.
  • 추상적인 개념을 구현한 것이 Redux이다.
  • Flux 아키텍처는 MVC 패턴의 문제점을 보완할 목적으로 고안.
  • [흐름] View에서 Store로 직접 접근하지 않는다. View에서 Action를 통해 Dispatcher로 접근.
  • [흐름] 어떤 Action이 Dispatcher를 통하여 에서는 Store에 있는 데이터를 처리하고 그 작업이 끝날 때까지 Dispatcher에서 Action 대기

Flux로의 카툰 안내서

  • 액션 생성자(the action creator)
    • 전보기사(telegraph operator)와 같다.
    • Action은 App에서 어떤 부분이 업데이트 되어야 하는지 정의한다.
    • 어떤걸 업데이트 할지 정보를 액션형태로 변환해서 Dispatcher가 알아 들을 수 있게 해준다.
  • 디스패쳐(dispatcher)
    • 전화 교환원과 같다.
    • Action을 받으면 Action을 읽고 어떤 부분을 업데이트 할 지 정한다.
    • 동기적으로 실행. 여러 Action이 들어오면 우선권을 가진 Action을 순서대로 처리한다.
  • 스토어(store)
    • 정부관료와와 같다.
    • 모든 상태와 관련된 로직을 지니고 있다.
  • 뷰(the view)
    • 발표자와 같다.
    • Application 내부에 대해서 아는게 없지만, 사람들이 이해 할 수 있는 HTML으로 바꾸는 방법을 알고 있다

MVC(Model-View-Controller) 디자인 패턴

Action -> Controller -> Model <-> View

  • 어떤 Action이 입력 되면, Controller는 Action를 받아서 Model이 지니고 있는 데이터를 조회하거나 업데이트 할 수 있다. 그 변화는 View에 반영된다.
  • View에서 Model의 데이터에 접근하여 업데이트 할 수 있다.
  • 작은 규모의 Application에서는 큰 문제없이 작동 한다. 큰 규모의 Application에서는 Model <-> View의 갯수가 늘어나면 복잡해진다.
  • Model과 View가 서로 연관 되어 있어 무한반복에 빠질 수 있다
  • 대표적인 사례로는 페이스북의 읽지 않는 갯수 표시
    페이스북의 여려곳 채팅창에서 특정 한군데에서 메시지를 읽었지만 읽지 않았다고 표시가 된 적이 있다. 사용자 입장에서는 불편한 경험을 했다. 그래서 페이스북은 기존에 사용하던 MVC아키텍처를 버리고 Flux를 적용시켰다.

code & view