김민준님의 리엑트를 다루는 기술을 읽고 작성한 세미나 자료입니다.

1. 다같이 React를 이해해 봅시다.
리액트 소개
이재민
2018년 9월

2. 2018
자바스크립트로 대규모 애플리케이션을 개발할 수 있게 되었다.
1995

4. MVC, MVVM, MVM .
대부분 Model과 View로 이루어진 프레임워크

5. JSON data HTML

6. likes를 1에서 2로 바꾼다면?
JSON data HTML

7. data를 변경하는 로직 DOM에 반영하는 로직(Mutate)
JSON data HTML

8. 규모가 커진다면?
구조가 복잡하다면?
제대로 관리를 못한다면?
그런데...

9. 만약 Ju-eun에게서 메시지가 온다면?

10. 4개 요소이상의 View 반영..

11. View를 관리하는것이
점점 힘들어진다...

13. 과거의 DOM
새로운 데이터로
새로 만든 새로운 DOM
아주 간단한 원리

14. 더 이상 어떻게 View를 반영할지
고민할 필요가 없다!

15. 그런데 과연 이것이 효율적일까..?
CPU 점유율도 높아지고...
메모리도 많이 들어가고..

17. 리엑트에 대한 이해가 필요

18. component

19. component template
!==
타 프레임워크의 template과는 다른 개념!

20. template HTML Markup 문자열 반환…
template은…

21. 하지만 component는
조금더 복잡하다.

22. component
컴포넌트의 생김새
컴포넌트의 동작 방식
component

23. component
렌더링
Browser

24. 초기 렌더링
리 렌더링
두개의 랜더링이 존재한다.

25. render() { }
초기 렌더링
render함수로 렌더링 시작

26. render() { }
초기 렌더링
render함수로 렌더링 시작
컴포넌트의 생김새
컴포넌트의 동작 방식
최상위 컴포넌트 해석

27. render() { }
초기 렌더링
render함수로 렌더링 시작
최상위 컴포넌트 해석
자식 컴포넌트를 재귀 해석

28. 초기 렌더링
자식 컴포넌트를 재귀 해석
HTML 마크업 작성
DOM에 HTML 주입

29. 리 렌더링(조화단계)
데이터 변경시 리렌더링 시작

30. 리 렌더링(조화단계)
초기 렌더링과 같은 방식으로 트리 작성

31. 리 렌더링(조화단계)
현재 렌더링 트리 리 렌더링 트리
초기 렌더링 트리와 리 렌더링 트리를 비교

32. 리 렌더링(조화단계)
현재 렌더링 트리 리 렌더링 트리
변경된 부분만 변경

33. Virtual DOM

34. DOM
Document Object Model

35. DOM
Document Object Model
트리 구조로 작성되며 원하는 node 를 선택적으로 제어 가능

36. 그럼 왜 Virtual DOM 을 사용할까?

37. 그럼 왜 Virtual DOM 을 사용할까?
DOM은 느린가?

38. 그럼 왜 Virtual DOM 을 사용할까?
DOM은 느린가?
DOM자체의 속도는 JS 속도와 큰 차이가 없다.

39. 그럼 왜 Virtual DOM 을 사용할까?
DOM은 느린가?
DOM자체의 속도는 JS 속도와 큰 차이가 없다.
But!,

40. 그럼 왜 Virtual DOM 을 사용할까?
DOM은 느린가?
DOM자체의 속도는 JS 속도와 큰 차이가 없다.
But!,
동적 UI구현시 너무 많은 연산 및 리페인팅 시간 허비

41. Virtual DOM은 최소한의 처리와 효율을 위한
DOM을 Javascript로 추상화한 객체

42. Virtual DOM을 이용한 DOM 업데이트 단계

43. Virtual DOM을 이용한 DOM 업데이트 단계
1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM 에 리 렌더링

44. Virtual DOM을 이용한 DOM 업데이트 단계
1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM 에 리 렌더링
2. 이전 Virtual DOM에 있던 내용과 현재내용을 비교

45. Virtual DOM을 이용한 DOM 업데이트 단계
1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM 에 리 렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용

46. 우리는 다음 문제를 해결하기 위해 리엑트를 만들었습니다
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기
-리엑트 메뉴얼-