2018년 7회 월별모의고사 해설(1차) 제7회 공인중개사 모의고사 [1차] 공인중개사 정답및해설 4랜드하나 제7회 전국모의고사 07.[정답] ⑤ (난이도
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
-
Upload
dohyun-jung -
Category
Software
-
view
3.596 -
download
7
Transcript of 발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
React +https://dalinaum.github.io
https://facebook.github.io/react/docs/why-react.html
https://twitter.com/sebmarkbage/status/632257978003951616
React
JSXTransformer에서 Babel로
• JSXTransformer는 폐기됩니다.
• https://facebook.github.io/react/blog/2015/07/03/react-v0.14-beta-1.html
• 대신에 브라우저 버전의 Babel을 사용하세요.
• Babel has a built-in JSX transpiler.
• https://babeljs.io/docs/usage/browser/
• npm install babel-core
• <script src=“JSXTransformer.js”> 대신<script src=“browser.js”>을 쓰세요.
• type=“text/jsx"대신 type=“text/babel”을 쓰세요.
Hello
Composition
Prop Validation
Default Prop
Mixins
폼• 폼 컴포넌트는 사용자 상호작용을 통해 영향을 받는 몇 가지 props를 지원합니다.
• value: <input>, <textarea> 컴포넌트에서 사용가능.
• checked: checkbox, radio타입의 <input> 컴포넌트에서 사용가능.
• selected: <option> 컴포넌트에서 사용가능.
• HTML에서는 <textarea> 태그의 값을 설정할 때 <textarea> 태그의 자식이 사용되지만, React에서는 value 를 사용해야 합니다.
• 폼 컴포넌트는 onChange prop의 콜백을 설정하여 변경을 감시(listening)할 수 있습니다. onChange prop는 브라우저에 관계없이 다음과 같은 사용자 상호작용에 반응합니다.
• <input>, <textarea>의 value 변경.
• <input>의 checked state 변경.
• <option>의 selected state 변경.
findDOMNode와 refs
ES6 class
오토 바인딩과 믹스인이 안되는 단점은 있음.
React.Component + Auto Binding
ES6 + Manual bind
ES7
=>
Animation
생명주기• Mounting
• getInitialState()
• componentWillMount()
• componentDidMount()
• Updating
• componentWillReceiveProps(object nextProps)
• shouldComponentUpdate(object nextProps, object nextState)
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• Unmounting
• componentWillUnmount()
개발도구• React Devtools
• https://github.com/facebook/react-devtools
• https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
• https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
• 프로파일러 - http://reactkr.github.io/react/docs/perf-ko-KR.html
왜 Virtual DOM인가요?
• 비교조정에 대한 글: https://facebook.github.io/react/docs/reconciliation-ko-KR.html
• 개발자가 기고한 글: http://calendar.perfplanet.com/2013/diff/
Unidirectional blahblah… Flux?
우린 Redux로 갑니다. Flux + Elm + 향상된 DX
http://staltz.com/unidirectional-user-interface-
architectures.html
Redux demo
• http://rackt.github.io/redux/docs/introduction/Examples.html#counter
• reducers와 actions을 살펴봄. (훨씬 심플하죠?)
Hot module replacement demo
• https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement
React route demo
• http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/
React isomorphic demo
• http://jmfurlott.com/tutorial-setting-up-a-simple-isomorphic-react-app/
Electron
• Electron demo
React Native demo
• https://facebook.github.io/react-native/
Relay와 GraphQL?• https://github.com/relayjs/relay-starter-kit
react.careers
react.rocks
참고
• React 한글 버전 문서:http://reactkr.github.io/react/docs/getting-started-ko-KR.html
• Flux 한글 버전 문서:http://haruair.github.io/flux/docs/overview.html#content
• 페이스북 그룹 React Korea와 Reactist