- 출처: inflearn - velopert님 강의
- Redux
- Flux
- MVC(Model-View-Controller) 디자인 패턴
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
를 적용시켰다.
- 대표적인 사례로는