Redux에 대한 설명 FDBG Facebook Developer Group

1. 역시 Redux!
dalinaum@gmail.com
Realm

2. About me

7. 웹 전문가가 아닙니다
죄송…

8. Data flows

9. 컨트롤러 모델 뷰
전통적인 MVC

10. 댓글이 작성되면…
• 타임라인에도 올려야 하고
• 노티피케이션 창에도 넣어줘야 하고
• 사이드 바에도 넣어줘야해요.
• 거기에 맞추어서 모든 화면의 댓글 수도 갱신해야 해요.
무슨 말인지 아시죠?

11. 컨트롤러 모델 뷰
전통적인 MVC
모델 뷰
모델 뷰
모델 뷰
모델 뷰

12. 이번에 입사한 인턴이 페이스북을 또 망가트렸어요.
어쩌죠?

13. 1.인턴을 야단친다
2.자료 구조를 바꾼다.
3.일본을 공격한다.

14. 일단 개선을 위해 다른 데이터 흐름을 봅시다.

15. 모델 뷰-모델 뷰
MVVM

16. 모델 뷰 모델 뷰
• 양방향 바인드
• 뷰 모델이 갱신되면 뷰가 바뀝니다.
• 뷰가 바뀌면 뷰 모델이 바뀝니다.
• 뷰를 신경 안써도 되네요?
뷰 모델 꿀잼!
• 테스트도 일반 객체인 뷰-모델만 하면 되네요?
TDD 개이득!

17. 뷰-모델 뷰
뷰-모델 뷰
뷰 모델이 바뀌었어요.
그래서, 뷰가 바뀌었어요.
뷰-모델 뷰
그래서, 그래서, 뷰 모델이 바뀌었어요.
뷰-모델 뷰
그래서, 그래서, 그래서 뷰가 바뀌었어요.

18. 페인트를 부었는데 상류의 색이 바뀌는 기적이!

19. 실제로는 이러지 않아요.
데이터 별로 시간을 가지고 있어서 시간을 비교해요.

20. • 응 시간도 가지고 있어야 해요? 필드별로?
• 항상 시간을 비교도 해야 해요?

21. 조금 더 편해지지만,
조금 더 구조가 복잡해지고 느려요.

22. 안되겠어. 단방향으로 자료 흐름을 새로 만들자.

23. 액션 디스패처 스토어
플럭스
뷰

24. 액션 디스패처 스토어
뷰에서 다시 조작하면?
뷰
액션

25. 액션
디스패처스토어
다른 관점에서 보면
뷰 (React)
액션
DOM
스토어

26. Criticism

27. 디스패처가 꼭 필요한가?
내 댓글이나 커멘트 숫자는 어느 스토어에만 들어가야해?
디버깅이나 핫 모듈 대체는 어떻게 구현할꺼야?
핫 모듈 대체 로더 깍는 노인
Dan Abramov

28. A
B
C
D
Ver 1
B
B
C
C
Ver 2
B
B
B
C
Ver 3
B
B
B
B
Ver 4

29. B
B
B
B
Ver 4
대체 어떻게 된거죠? 모든 데이터가 다 B에요.
어느 시점부터 데이터가 망가졌는지
알았으면 좋겠는데…
데이터를 변경하지 말고 항상 새로 만듭시다.
그럼 과거 버전으로 돌아갈 수 있죠.

31. 핫 모듈 대체: 실행 코드를 실시간으로 변경점만 반영.

32. 플럭스는 자료와 로직들이 명확히 분리되지 않아요.
• 로직 갱신!
• 어 데이타가 사라졌어요.

33. 축하합니다. 핫 모듈 대체를 리프레쉬로 만들어 버렸어요.

34. 로직을 완전히 분리해서 “리듀서” (Reducer)라고 부릅시다.
• Reducer 라는 자바스크립트 메서드도 있어요.
• 자료가 변경되는게 아니니 Updater는 안 맞아 보여요.

35. 로깅이나 기능 추가는 어떻게 할꺼에요?
비동기 지원이나 Rx 지원도 어떻게 하죠?
액션에 기능을 추가하면 어떨까요?
미들웨어 개념을 도입합시다.
액션 앞에 여러 기능을 체이닝 하는 거죠.
기능 추가 헬퍼 메서드를 고민해봤는데 그럼
여러 기능이 필요하면 어떻게 하죠?

36. 로깅이 필요하면 로깅 미들웨어 추가하고
액션 메시지 대신에 함수를 전달했으면 하면
Thunk 미들웨어 추가하고
Rx가 필요하면 해당 미들웨어 추가하는 거죠.
액션
리듀서
리듀서
리듀서
미들웨어미들웨어미들웨어미들웨어

38. 액션
액션
단일 불변 스토어
리듀서
리듀서
리듀서
액션
A
A
A
새 데이터
미들웨어미들웨어미들웨어미들웨어
뷰 (React)
DOM

39. Redux

40. Single source of truth
store라는 단일 계층 객체로
전체 애플리케이션의 상태를 관리
여러 store를 사용하는 flux와는
다름.

41. State is read-only
상태의 변경은 action을 전달해야만
가능.
action은 단일 객체.
action 팩토리 등을 만들어 사용.

42. Mutations are written as pure functions
state
action
new
state
reducers (pure functions)

43. Mutations are written as pure functions

44. Mutations are written as pure functions

45. Mutations are written as pure functions

46. React Redux (래퍼)

48. this.props 주입

49. Q & A