Embed Size (px)
Citation preview
React.js
React.js 란?
React.js 란?
• javascript 라이브러리
• Facebook 에서 만듦
• MVC의 V에 초점을 맞춤
React.js 의 특징
React.js 의 특징
• Just UI
• Virtual DOM
• Data Flow
기본 사용
기본 사용
기본 사용
기본 사용
기본 사용
기본 사용
기본 사용
기본 사용
기본 사용
X
기본 사용
O
기본 사용
기본 사용
기본 사용
JSX
JSX
• Javascript + XML
• HTML문법으로 javascript object 를 생
성
• javascript 내부에 마크업 허용
JSX
JSX
–Pete Hunt
“Separating html and js is separation
of technologies, not concerns.”
state
state
• 내부에서 사용되는 데이터
• 변경 가능(Mutable)
• 동적인 UI를 만드는데에 사용됨
state
state
state
state
state
state
props
props
• 외부에서 넘겨주는 데이터
• 컴포넌트의 어트리뷰트로 넘김
• 변경 불가능한 데이터 (Immutable)
props
props
props
props
props
props
props
props.children
props.children
props.children
Virtual DOM
Virtual DOM
• 가상의 DOM을 만들어 관리
• 업데이트가 필요한 부분만 변경
• 성능관리를 자동으로 해줌
• 서버에서 DOM을 미리 랜더링
Virtual DOM
Virtual DOM
Virtual DOM
Virtual DOM
Virtual DOM
Virtual DOM
Lifecycle Methods
Lifecycle Methods -Mount
getDefaultProps
componentWillMount
getInitialState
render
componentDidMount
Lifecycle Methods -Mount
Lifecycle Methods -Update
componentWillReceiveProps
componentWillUpdate
shouldComponentUpdate
render
componentDidUpdate
Lifecycle Methods -Update
권장 사항
권장 사항
권장 사항
권장 사항
CSS 처리
CSS 처리
• React 에서 제공되는 Inline Style 사용
• Isomorphic CSS style loader
CSS 처리
CSS 처리
CSS 처리
CSS 처리
사용 사례
사용 사례
• 사이트 리스트 :
https://github.com/facebook/react/w
iki/Sites-Using-React
• 개발자 도구 :
https://github.com/facebook/react-
devtools
참고 URL
참고 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
Q&A
THANK YOU
