8. flux
기본 MVC 패턴
코드가 늘어날수록 흐름을 예측하기 어려움 MVC패턴, 그림처럼 Model과 View사이에 많은 참조 관계가 물려있다.
Flux 패턴
심플하고 단방향성으로 흐른다. View에서 Data를 변경하려면 무조건 Action을 통하는 방법밖에 없어 데이터의 흐름도 예외가 없다.
역할을 통한 내용으로 잘 설명되어 있다. 각 역할에 대한 설명이다.
액션 생성자(the action creator)
액션 생성자 : 어떤부분이 업데이트 되어야 하는지 정의 (전보기사) 변환해서 Dispatcher가 알 수 있도록 변환
디스패쳐(dispatcher)
디스패쳐 : (교환원) 액션을 받으면 액션을 읽고, 어떤 부분을 업데이트할지 정해줌 동기적으로 처리, 순서대로 처리 꼬이지 않는다.
스토어(store)
스토어 : (정부관료) 모든 상태와 관련된 로직을 가지고 있음
컨트롤러 뷰(the controller view)와 뷰(the view)
컨트롤러 뷰 : (발표자) 사람들이 알 수 있도록 HTML 변경
준비(the setup)
먼저 애플리케이션이 초기화할 때 딱 한번 준비과정을 가진다.
- 스토어는 디스패쳐에 액션이 들어오면 알려달라고 말해둔다.
- 컨트롤러 뷰는 스토어에게 최신 상태를 묻는다.
- 스토어가 컨트롤러 뷰에게 상태를 주면 렌더링하기 위해 모든 자식 뷰에게 상태를 넘겨준다.
- 컨트롤러 뷰는 스토어에게 상태가 바뀔 때 알려달라고 다시 부탁한다.
데이터 흐름(the data flow)
준비과정이 끝나면 애플리케이션은 유저 입력을 위한 준비가 완료된다. 사용자의 입력으로 인한 액션이 생겼을 경우를 보자. 사용자 입력으로부터 데이터 흐름을 만들것이다.
- 뷰는 액션 생성자에게 액션을 준비하라고 말한다.
- 액션 생성자는 액션을 포맷에 맞게 만들어서 디스패쳐에 넘겨준다.
- 디스패쳐는 들어온 액션의 순서에 따라 알맞은 스토어로 보낸다. 각 스토어는 모든 액션을 받게 되지만 필요한 액션만을 골라서 상태를 필요에 맞게 변경한다.
- 상태 변경이 완료되면 스토어는 자신을 구독(subscribe)하고 있는 컨트롤러 뷰에게 그 사실을 알린다.
- 연락을 받은 컨트롤러 뷰들은 스토어에게 변경된 상태를 요청한다.
- 스토어가 새로운 상태를 넘겨주면, 컨트롤러 뷰는 자신 아래의 모든 뷰에게 새로운 상태에 맞게 렌더링하라고 알린다.
