Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Flux 예제 분석 2
쇼핑 카트
by peter_yun
목차
● Flux 애플리케이션 구조
● index.html & package.json
● Dispatcher 만들기
● Action Type & Action Creator
● Store
● Controller View
...
Flux 애플리케이션 구조
components
stores
dispatcher
actions
constants
ProductData
utils/CartAPI
Flux 애플리케이션 구조
http://react-flux-cart.scotch.io/
CartApp
Catalog
Cart
index.html & package.json
Production
● react : reactjs
● flux : dispatcher from FB
Development
● browserify 안에 reactify 통해...
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-widt...
Dispatcher 만들기
● npm install flux
● Dispatcher는 중앙 허브
o dispatch : payload 전파
o register : payload 받기
payload = ActionType...
Action Creator
● Action Creator를 생성
○ View에서 호출 할 Public Domain Function (PDF)
○ payload 생성
○ Dispatcher.dispatch에 payload...
Action Creator 흐름도
Action Creator
PAYLOAD 생
성View
PDF
PAYLOAD 전파 의뢰
Store
● 데이터 상태 저장
● 데이터 set은 private 구성
o Dispatcher.register를 통해 Action type을 받아 set 함
● View로 payload 전송은 event 이용
o Nod...
Store - private set
private set data 영역
Dispatcher가 dispatch 한
payload를 받아 private set 호출을 위한
Dispatcher의 register에 콜백 등록
...
Store - payload 전송
Store에서 private set 이 호출되
면
change 이벤트를 전송한다.
change 이벤트를 받아 실행할
callback을 View에서 등록한다.
module.exports ...
Store - set/get 그리고 event 흐름도
set data
get dataevent
Controller View
● Controller View는 Store의 변경을 감지(Listen)하고, Store 의 public
get 통해 변경 데이터를 가져온다.
● 가져온 데이터는 setState 통해 thi...
Controller View
View Component Lifecycle 통해
Store 이벤트 Listen/Remove
this.setState 호출 최신 상태 유
지
Store 이벤트를 받으면 Store의
publi...
Controller View 흐름도
public get dataevent listen
setState 최
신상태유지
child component는
props 통해 데이터 전달
Child View
● Action Creator를 짝사랑한다.
o UI 이벤트 발생시 호출
● this.props 만 편식한다.
o UI 렌더링 데이터
Mock Data 테스트
app.js
Mock Data
셋팅
정리
● Flux 단방향은 data set 이 단방향이라는 말씀 !!!
● Dispatcher는 payload 받고 전달하는 중앙 허브
● Action Creator는 payload 생성자
● Store은 payload...
실전 프로젝트로 배우는 AngularJS
많이 사보세요. ^^
그러면 ReactJS가
곧 출간됩니다…..
Upcoming SlideShare
Loading in …5
×

Flux 예제 분석 2

10,404 views

Published on

페이스북의 Flux 패턴에 대하여 Shopping Cart 소스를 기반으로 분석해 보았다.

동영상은 유튜브 : https://youtu.be/2Sm5rGxWRSQ

관련 블로그 : http://mobicon.tistory.com/465

Published in: Engineering
  • Be the first to comment

Flux 예제 분석 2

  1. 1. Flux 예제 분석 2 쇼핑 카트 by peter_yun
  2. 2. 목차 ● Flux 애플리케이션 구조 ● index.html & package.json ● Dispatcher 만들기 ● Action Type & Action Creator ● Store ● Controller View ● Mock Data 테스트 ● 정리
  3. 3. Flux 애플리케이션 구조 components stores dispatcher actions constants ProductData utils/CartAPI
  4. 4. Flux 애플리케이션 구조 http://react-flux-cart.scotch.io/ CartApp Catalog Cart
  5. 5. index.html & package.json Production ● react : reactjs ● flux : dispatcher from FB Development ● browserify 안에 reactify 통해 reactjs의 jsx 변환 ● watchify Script ● npm start : src/bundle.js 생성 ● npm build not use grunt/gulp
  6. 6. index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Flux Cart</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <section id="flux-cart"></section> <script src="js/bundle.js"></script> </body> </html>
  7. 7. Dispatcher 만들기 ● npm install flux ● Dispatcher는 중앙 허브 o dispatch : payload 전파 o register : payload 받기 payload = ActionType + Data
  8. 8. Action Creator ● Action Creator를 생성 ○ View에서 호출 할 Public Domain Function (PDF) ○ payload 생성 ○ Dispatcher.dispatch에 payload 전파 의뢰 ● Action Type 정의
  9. 9. Action Creator 흐름도 Action Creator PAYLOAD 생 성View PDF PAYLOAD 전파 의뢰
  10. 10. Store ● 데이터 상태 저장 ● 데이터 set은 private 구성 o Dispatcher.register를 통해 Action type을 받아 set 함 ● View로 payload 전송은 event 이용 o NodeJS EventEmitter ● 데이터 get은 public 구성 o View에서 get 하고 setState 함
  11. 11. Store - private set private set data 영역 Dispatcher가 dispatch 한 payload를 받아 private set 호출을 위한 Dispatcher의 register에 콜백 등록 use private set data 하면 change 이벤트 발생
  12. 12. Store - payload 전송 Store에서 private set 이 호출되 면 change 이벤트를 전송한다. change 이벤트를 받아 실행할 callback을 View에서 등록한다. module.exports 하여 View 에서 public get data 할 영역
  13. 13. Store - set/get 그리고 event 흐름도 set data get dataevent
  14. 14. Controller View ● Controller View는 Store의 변경을 감지(Listen)하고, Store 의 public get 통해 변경 데이터를 가져온다. ● 가져온 데이터는 setState 통해 this.state 최신 상태를 유지 ● this.props 통해 Child Component에 데이터를 아래로 내려줌
  15. 15. Controller View View Component Lifecycle 통해 Store 이벤트 Listen/Remove this.setState 호출 최신 상태 유 지 Store 이벤트를 받으면 Store의 public get data를 호출
  16. 16. Controller View 흐름도 public get dataevent listen setState 최 신상태유지 child component는 props 통해 데이터 전달
  17. 17. Child View ● Action Creator를 짝사랑한다. o UI 이벤트 발생시 호출 ● this.props 만 편식한다. o UI 렌더링 데이터
  18. 18. Mock Data 테스트 app.js Mock Data 셋팅
  19. 19. 정리 ● Flux 단방향은 data set 이 단방향이라는 말씀 !!! ● Dispatcher는 payload 받고 전달하는 중앙 허브 ● Action Creator는 payload 생성자 ● Store은 payload를 받아 모든 View에 payload 전달 ● Controller View는 부모 Component로 최신 state 유지 ● 자식 View Component는 this.props를 이용하고, 이벤트 발생시 Action Creator 호출 ● 참조 https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux#api-&-mock-data https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
  20. 20. 실전 프로젝트로 배우는 AngularJS 많이 사보세요. ^^ 그러면 ReactJS가 곧 출간됩니다…..

×