Skip to content

8. flux

happykim edited this page Dec 1, 2016 · 27 revisions

##Flux

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

기본 MVC 패턴

코드가 늘어날수록 흐름을 예측하기 어려움 MVC패턴, 그림처럼 Model과 View사이에 많은 참조 관계가 물려있다.

Flux 패턴

심플하고 단방향성으로 흐른다. View에서 Data를 변경하려면 무조건 Action을 통하는 방법밖에 없어 데이터의 흐름도 예외가 없다.


▶Flux 카툰 안내서에서 재공한 내용이다.

역할을 통한 내용으로 잘 설명되어 있다. 각 역할에 대한 설명이다.

액션 생성자(the action creator)

액션 생성자 : 어떤부분이 업데이트 되어야 하는지 정의 (전보기사) 변환해서 Dispatcher가 알 수 있도록 변환

디스패쳐(dispatcher)

디스패쳐 : (교환원) 액션을 받으면 액션을 읽고, 어떤 부분을 업데이트할지 정해줌 동기적으로 처리, 순서대로 처리 꼬이지 않는다.

스토어(store)

스토어 : (정부관료) 모든 상태와 관련된 로직을 가지고 있음

컨트롤러 뷰(the controller view)와 뷰(the view)

컨트롤러 뷰 : (발표자) 사람들이 알 수 있도록 HTML 변경


▶동작 순서

준비(the setup)

먼저 애플리케이션이 초기화할 때 딱 한번 준비과정을 가진다.

  1. 스토어는 디스패쳐에 액션이 들어오면 알려달라고 말해둔다.

  1. 컨트롤러 뷰는 스토어에게 최신 상태를 묻는다.
  2. 스토어가 컨트롤러 뷰에게 상태를 주면 렌더링하기 위해 모든 자식 뷰에게 상태를 넘겨준다.

  1. 컨트롤러 뷰는 스토어에게 상태가 바뀔 때 알려달라고 다시 부탁한다.

  1. File -> Import -> Git -> Projects from Git -> Clone URI 선택
  1. Clone 하려는 원격 저장소의 정보를 입력 후 Next -> 로컬에 복제 하고 싶은 브랜치(Branch)를 선택 후 Next
  1. 저장소를 복제할 디렉토리를 선택 후 Next -> 「Import as general project」(일반적인 프로젝트로 가져오기)란을 체크 후 Next-> 프로젝트 이름을 수정하고 싶을 경우에만 수정 하고 Finish.
  1. Package Explorer, Git Repositories 뷰에 원격 저장소에서 로컬로 Clone 한 프로젝트가 아래와 같이 보여지면 완료!

Clone this wiki locally