React.js 사내 세미나 자료입니다. 발표에서 사용된 코드는 ppt의 가장 마지막인 참고 URL 슬라이드에 공유 링크가 있습니다.

1. React.js

2. React.js 란?

3. React.js 란?
• javascript 라이브러리
• Facebook 에서 만듦
• MVC의 V에 초점을 맞춤

4. React.js 의 특징

5. React.js 의 특징
• Just UI
• Virtual DOM
• Data Flow

6. 기본 사용

7. 기본 사용

8. 기본 사용

9. 기본 사용

10. 기본 사용

11. 기본 사용

12. 기본 사용

13. 기본 사용

14. 기본 사용
X

15. 기본 사용
O

16. 기본 사용

17. 기본 사용

18. 기본 사용

19. JSX

20. JSX
• Javascript + XML
• HTML문법으로 javascript object 를 생
성
• javascript 내부에 마크업 허용

21. JSX

22. JSX

23. –Pete Hunt
“Separating html and js is separation
of technologies, not concerns.”

24. state

25. state
• 내부에서 사용되는 데이터
• 변경 가능(Mutable)
• 동적인 UI를 만드는데에 사용됨

26. state

27. state

28. state

29. state

30. state

31. state

32. props

33. props
• 외부에서 넘겨주는 데이터
• 컴포넌트의 어트리뷰트로 넘김
• 변경 불가능한 데이터 (Immutable)

34. props

35. props

36. props

37. props

38. props

39. props

40. props

41. props.children

42. props.children

43. props.children

44. Virtual DOM

45. Virtual DOM
• 가상의 DOM을 만들어 관리
• 업데이트가 필요한 부분만 변경
• 성능관리를 자동으로 해줌
• 서버에서 DOM을 미리 랜더링

46. Virtual DOM

47. Virtual DOM

48. Virtual DOM

49. Virtual DOM

50. Virtual DOM

51. Virtual DOM

52. Lifecycle Methods

53. Lifecycle Methods -
Mount
getDefaultProps
componentWillMou
nt
getInitialState
render
componentDidMou
nt

54. Lifecycle Methods -
Mount

55. Lifecycle Methods -
Update
componentWillReceivePro
ps
componentWillUpdate
shouldComponentUpdate
render
componentDidUpdate

56. Lifecycle Methods -
Update

57. 권장 사항

58. 권장 사항

59. 권장 사항

60. 권장 사항

61. CSS 처리

62. CSS 처리
• React 에서 제공되는 Inline Style 사용
• Isomorphic CSS style loader

63. CSS 처리

64. CSS 처리

65. CSS 처리

66. CSS 처리

67. 사용 사례

68. 사용 사례
• 사이트 리스트 :
https://github.com/facebook/react/w
iki/Sites-Using-React
• 개발자 도구 :
https://github.com/facebook/react-
devtools

69. 참고 URL

70. 참고 URL
• 이 발표의 소스코드 : http://codepen.io/collection/DBadre/
• 한글 사이트 : http://reactkr.github.io/react/docs/getting-started.html
• 개념잡기 좋은 사이트: http://goo.gl/GeQke7
• wordpress가 php를 버리고 react.js를 선택한 이유 : http://goo.gl/MGXC9B
• browserify vs webpack :
http://blog.coderifleman.com/post/112564054684/browserify%EC%99%80-webpack
• react.js 와 webpack 으로 세팅하기 : https://goo.gl/ct8lBl
• airbnb react 적용 : http://goo.gl/MnA63A
• 머티리얼 UI : http://www.material-ui.com/
• react 사용 사이트 리스트 : https://github.com/facebook/react/wiki/Sites-Using-React
• 개발자도구 : https://github.com/facebook/react-devtools
• Isomorphic CSS style loader : https://github.com/kriasoft/isomorphic-style-loader

71. Q&A

72. THANK YOU