[MASOCON 2017] React.js에 반응하라 - 김동우 운영진/자바스크립트 개발자 포럼

2017년 11월 25일 마이크로소프트웨어 개발자 콘퍼런스, 마소콘 2017
React.js에 반응하라 - 김동우 운영진/자바스크립트 개발자 포럼

Transcript

1. 김동우 (gimdongwoo@gmail.com)
2. 김동우 2009 C/S 개발자 중2 C++ 주니어 2004 Web 개발자 2017 OpenSource 개발자 2013 IT 기획자 2015 Startup CTO
3. 김동우 자바스크립트 개발자 포럼 운영 React Korea (Facebook 그룹) 운영 Facebook Developer Circle : Seoul 리더
4. 프론트엔드 개발자 손 들어 주세요! 죄 지은거 아니잖아요~ 손 번쩍 부탁드립니다.
6. https://github.com/WegraLee/developer-roadmap/blob/master/README.md
7. React.js 들어보신 분 손 들어 주세요! 프론트엔드 개발자 아니셔도 들어보셨을거에요!
8. • React.js 라고 불렸으나, 유명해지더니 이젠 그냥 React
9. React • Star 80k+, Fork 15k+ • ㄷㄷㄷ부럽
10. React
11. Angular.js vs React.js
12. Angular.js vs React.js • Google Trends (2012-2017, Search term) • 니네 둘이 비교 당하는건 숙명이야...
13. 왜 그렇게 React에 열광하지? • 이제 부터 살펴 봅시다 J
14. 10년은 가지고 놀만한 아이디어 https://twitter.com/rauchg/status/801005961334943744
15. Invented by Facebook • 농담 아니고, 사실 이게 제일 큼!
16. Facebook’s React version
17. Facebook’s React version • 개밥먹기 하는 Facebook
18. Big brothers • Airbnb • Atlassian • Dropbox • Netflix • Twitter • Paypal • Reddit • Uber
19. 세상에서 제일 복잡한 웹앱 • Facebook이 만들어서 쓰는거면 끝난거 아닌가요?
20. No! 우리 앱은 그렇게 안 복잡해!
21. No! 우리 앱은 그렇게 안 복잡해!
22. 왜 React 쓰시나요? • 누구는 랜더링이 빨라서 • Virtual DOM을 써서 빠르다고 해요. • 우리 앱은 jQuery 쓰는데도 빠른데? • 누구는 뷰를 다루기 쉬워서 • 단방향 데이터 흐름이라 코딩하기 쉽데요. • Angular는 양방향 데이터 바인딩이라 인기 있지 않았나?
23. 왜 React 쓰시나요? • 인기 있어서 • 남들 쓰니까 • Facebook • ...
24. 브라우저의 Workflow https://velopert.com/3236
25. JS로 DOM 조작할 때의 문제는 • 30개의 노드를 하나 하나 수정하면 • 30번의 (잠재적인) 레이아웃 재계산 • 30번의 (잠재적인) 리렌더링 https://velopert.com/3236
26. Virtual DOM • React가 가지고 있는 DOM Tree의 모사 구조체 • 리렌더링이 일어날 때, Vitrual DOM에 그리고, 전 후 구조체의 차이(diff)만을 도출하여 DOM에 반영
27. Virtual DOM • React가 가지고 있는 DOM Tree의 모사 구조체 • 리렌더링이 일어날 때, Vitrual DOM에 그리고, 전 후 구조체의 차이(diff)만을 도출하여 DOM에 반영 • React의 Virtual DOM 비교(diff)는 날고 기는 Facebook 외계인엔지니어들의 역작 • 대부분의 경우에 충분히 빠름!
28. Data flow • React는 단방향 데이터 흐름 • 주어진 데이터가 같으면 항상 같게 그려짐 • 단순한 데이터 흐름으로 예측하고 추적하기 쉬움 • 복잡한 앱 일수록 빛을 발합니다!
29. Data flow https://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660
30. JSX • XML 문법을 JS 코드에서 사용 • 논란의 시작... 똥 같이 짤 수 있음! • HTML 같아 보이지만 아님 import React from 'react'; default class App extends React.Component { render() { return ( <h1>Hello World</h1> ); } }
31. Declarative • React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. • Declarative views make your code more predictable and easier to debug.
32. 선언적 (Google 번역) • React는 대화 형 UI를 만드는 데 어려움을 겪습니다. 응용 프로그램의 각 상태에 대한 간단한 뷰를 디자인 하면 React는 데이터가 변경 될 때 올바른 구성 요소 만 효과적으로 업데이트하고 렌더링합니다. • 선언적 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듭니다.
33. 선언적 (Google 번역) • React는 대화 형 UI를 만드는 데 어려움을 겪습니다. 응용 프로그램의 각 상태에 대한 간단한 뷰를 디자인 하면 React는 데이터가 변경 될 때 올바른 구성 요소 만 효과적으로 업데이트하고 렌더링합니다. • 선언적 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듭니다.
34. 선언적 (Google 번역) • React는 대화 형 UI를 만드는 데 어려움을 겪습니 다.React는 대화 형 UI를 만드는 어려움을 없앱니다. 응 용 프로그램의 각 상태에 대한 간단한 뷰를 디자인하면 React는 데이터가 변경 될 때 올바른 구성 요소 만 효과적 으로 업데이트하고 렌더링합니다. • 선언적 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듭 니다.
35. Component • 재사용 가능한 UI 덩어리 • Lifecycle을가짐 • 데이터를 property로 부모로 부터 주입 받음 • 스스로의 state를 가짐 • property와 state가 바뀌면 리렌더링
36. https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/
37. Lifecycle 좀더 쉽게 • React 처음 할 때 가장 어려운 부분 https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1
38. React는 Component Tree • 컴포넌트 트리를 그려주고 • prop/state가 바뀌면 리랜더링 • 트리를 Diff해서 DOM에 반영 https://developmentarc.gitbooks.io/react- indepth/content/life_cycle/update/rerendering_and_children_updates.html
39. React는 Component Tree https://www.safaribooksonline.com/library/view/learning-react-native/9781491929049/ch02.html
40. 선언적 뷰 렌더링이 주는 편안함 • `이렇게 그려줘!` 라고만 주면 그려줍니다. • property와 state 는 불변객체(Immutable object)로!!
41. React.js 를 써야겠다! 손 들어 주세요! 이렇게 좋다는데 그냥 쓰는 걸로 합시다ㅠㅠ
43. React Native • React로 iOS, Android 앱도 만들자. • 하이브리드앱 그딴쓰레기 같은거 말고 네이티브! • JavaScript Everywhere
44. https://facebook.github.io/react-native/showcase.html
45. React.js 를 써야겠다! 손 들어 주세요! 이래도 안써요? 안 사실 분 가세요...
46. 좋아요! React를 쓰겠습니다! • React를 쓸 때 필요한것 들도 살펴 봅시다 J
47. React가 해주는 것 • 뷰 • 뷰 컴포넌트
48. React가 안 해주는 것 • 뷰 말고 나머지
49. Redux • Redux는 JS 앱을 위한 예측 가능한 상태 컨테이너 • React가 해주는게 없어서… https://prmadi.com/getting-started-with-react-native-app-and-parse/
50. Redux • Redux는 JS 앱을 위한 예측 가능한 상태 컨테이너 • React가 해주는게 없어서… https://prmadi.com/getting-started-with-react-native-app-and-parse/
51. https://codingthesmartway.com/learn-redux-introduction-to-state-management-with-react/
52. React + Redux https://css-tricks.com/learning-react-redux/
53. Redux Middleware • Redux-thunk • Redux-promise • Redux-saga • Redux-Observable • ... • Redux도 해주는게 별로 없어서..
54. React Router • React 용 Browser History API 라이브러리
55. React Router • React 용 Browser History API 라이브러리 • URL에 따라 그려야 할 Component를 매칭
56. React Router • React 용 Browser History API 라이브러리 • URL에 따라 그려야 할 Component를 매칭 • SSR(Server Side Rendering)을 위한 필수 요소
57. import { renderRoutes } from 'react-router-config' const routes = [ { component: Root, routes: [ { path: '/', exact: true, component: Home }, { path: '/child/:id', component: Child, routes: [ { path: '/child/:id/grand-child', component: GrandChild } ] } ] } ] ReactDOM.render(( <BrowserRouter> {/* kick it all off with the root route */} {renderRoutes(routes)} </BrowserRouter> ), document.getElementById('root'));
58. Client-Side Routing Model • window.location API & window.history API https://medium.freecodecamp.org/an-introduction-to-the-redux-first-routing-model-98926ebf53cb
59. Redux-First Routing Model • 일반적으로 많이 사용하는 모델 • 복잡해져따!!! https://medium.freecodecamp.org/an-introduction-to-the-redux-first-routing-model-98926ebf53cb
60. Node.js + Express • React 번들을 provide하기에 제일 적합한건 역시 • react-hot-loader를 사용해서 개발 효율성 Up! • React SSR 구성하기에 가장 쉽습니다. • 굳이 다른거 쓸 이유가?
61. webpack • JavaScript 모듈화 도구 • React 번들을 만들기 위한 빌더 • webpack-dev-server 없으면 개발 못합니다. • 아직도 저장 후 브라우저 새로고침 하세요?!
62. webpack https://webpack.github.io/
63. Babel • ES6+ JS 문법을 브라우저 지원에 맞게 트랜스코딩 • React에서 빈번하게 쓰는 import 문법 조차 지원 안함
64. Babel React Preset • JSX를 쓰기 위해서 꼭 필요합니다. • webpack에서 `babel-loader` 를 사용합니다. $ npm install --save-dev babel-cli babel-preset-react $ echo '{ "presets": ["react"] }' > .babelrc $ echo '<h1>Hello, world!</h1>' > index.js $ ./node_modules/.bin/babel index.js
65. 간편하게 React 시작하기 • 무조건 시작하기 : create-react-app • 간편하게 SSR : Next.js $ npm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start $ npm init $ npm install --save next react react-dom $ echo 'export default () => <div>Welcome to next.js!</div>' > ./pages/index.js $ next
66. 여기부터는 부록 발표시간이 남아도 문제, 모잘라도 문제;;;
67. React에서 해서는 안되는 것 #1 • Random value • Render가 일어날 때마다 값이 바뀌는 패턴을 만들면 망! • `math.random()`나 `new Date()`를 쓸 때 주의
68. React에서 해서는 안되는 것 #1 • Random value • Render가 일어날 때마다 값이 바뀌는 패턴을 만들면 망! • `math.random()`나 `new Date()`를 쓸 때 주의 • 한번은 라벨의 배경색을 color list에서 랜덤으로 뽑아 쓰는 코드를 만들었다가 무지개로 빛나는 라벨을 만듬...
69. React에서 해서는 안되는 것 #2 • Uncontrolled input • 선언적 렌더링이 불가능하게 만드는 패턴 • Input의 입력값을 잘못 읽어오거나 날릴 수 있다. • Input의 value는 control 되어야 한다. <input value={someValue} onChange={handleChange} />
70. class Form extends Component { constructor() { super(); this.state = { name: '', }; } handleNameChange = (event) => { this.setState({ name: event.target.value }); }; render() { return ( <div> <input type="text" value={this.state.name} onChange={this.handleNameChange} /> </div> ); } } https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
71. Q & A 질문이 적으면 발표를 잘했거나, 망했거나...
72. 감사합니다. #codestrong #javascript #react #redux