Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

MICROSOFTWARE
November 27, 2017

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

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

MICROSOFTWARE

November 27, 2017
Tweet

More Decks by MICROSOFTWARE

Other Decks in Programming

Transcript

  1. 김동우 2009 C/S 개발자 중2 C++ 주니어 2004 Web 개발자

    2017 OpenSource 개발자 2013 IT 기획자 2015 Startup CTO
  2. Angular.js vs React.js • Google Trends (2012-2017, Search term) •

    니네 둘이 비교 당하는건 숙명이야...
  3. Big brothers • Airbnb • Atlassian • Dropbox • Netflix

    • Twitter • Paypal • Reddit • Uber
  4. 왜 React 쓰시나요? • 누구는 랜더링이 빨라서 • Virtual DOM을

    써서 빠르다고 해요. • 우리 앱은 jQuery 쓰는데도 빠른데? • 누구는 뷰를 다루기 쉬워서 • 단방향 데이터 흐름이라 코딩하기 쉽데요. • Angular는 양방향 데이터 바인딩이라 인기 있지 않았나?
  5. JS로 DOM 조작할 때의 문제는 • 30개의 노드를 하나 하나

    수정하면 • 30번의 (잠재적인) 레이아웃 재계산 • 30번의 (잠재적인) 리렌더링 https://velopert.com/3236
  6. Virtual DOM • React가 가지고 있는 DOM Tree의 모사 구조체

    • 리렌더링이 일어날 때, Vitrual DOM에 그리고, 전 후 구조체의 차이(diff)만을 도출하여 DOM에 반영
  7. Virtual DOM • React가 가지고 있는 DOM Tree의 모사 구조체

    • 리렌더링이 일어날 때, Vitrual DOM에 그리고, 전 후 구조체의 차이(diff)만을 도출하여 DOM에 반영 • React의 Virtual DOM 비교(diff)는 날고 기는 Facebook 외계인엔지니어들의 역작 • 대부분의 경우에 충분히 빠름!
  8. Data flow • React는 단방향 데이터 흐름 • 주어진 데이터가

    같으면 항상 같게 그려짐 • 단순한 데이터 흐름으로 예측하고 추적하기 쉬움 • 복잡한 앱 일수록 빛을 발합니다!
  9. JSX • XML 문법을 JS 코드에서 사용 • 논란의 시작...

    똥 같이 짤 수 있음! • HTML 같아 보이지만 아님 import React from 'react'; default class App extends React.Component { render() { return ( <h1>Hello World</h1> ); } }
  10. 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.
  11. 선언적 (Google 번역) • React는 대화 형 UI를 만드는 데

    어려움을 겪습니다. 응용 프로그램의 각 상태에 대한 간단한 뷰를 디자인 하면 React는 데이터가 변경 될 때 올바른 구성 요소 만 효과적으로 업데이트하고 렌더링합니다. • 선언적 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듭니다.
  12. 선언적 (Google 번역) • React는 대화 형 UI를 만드는 데

    어려움을 겪습니다. 응용 프로그램의 각 상태에 대한 간단한 뷰를 디자인 하면 React는 데이터가 변경 될 때 올바른 구성 요소 만 효과적으로 업데이트하고 렌더링합니다. • 선언적 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듭니다.
  13. 선언적 (Google 번역) • React는 대화 형 UI를 만드는 데

    어려움을 겪습니 다.React는 대화 형 UI를 만드는 어려움을 없앱니다. 응 용 프로그램의 각 상태에 대한 간단한 뷰를 디자인하면 React는 데이터가 변경 될 때 올바른 구성 요소 만 효과적 으로 업데이트하고 렌더링합니다. • 선언적 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만듭 니다.
  14. Component • 재사용 가능한 UI 덩어리 • Lifecycle을가짐 • 데이터를

    property로 부모로 부터 주입 받음 • 스스로의 state를 가짐 • property와 state가 바뀌면 리렌더링
  15. Lifecycle 좀더 쉽게 • React 처음 할 때 가장 어려운

    부분 https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1
  16. React는 Component Tree • 컴포넌트 트리를 그려주고 • prop/state가 바뀌면

    리랜더링 • 트리를 Diff해서 DOM에 반영 https://developmentarc.gitbooks.io/react- indepth/content/life_cycle/update/rerendering_and_children_updates.html
  17. 선언적 뷰 렌더링이 주는 편안함 • `이렇게 그려줘!` 라고만 주면

    그려줍니다. • property와 state 는 불변객체(Immutable object)로!!
  18. React Native • React로 iOS, Android 앱도 만들자. • 하이브리드앱

    그딴쓰레기 같은거 말고 네이티브! • JavaScript Everywhere
  19. Redux • Redux는 JS 앱을 위한 예측 가능한 상태 컨테이너

    • React가 해주는게 없어서… https://prmadi.com/getting-started-with-react-native-app-and-parse/
  20. Redux • Redux는 JS 앱을 위한 예측 가능한 상태 컨테이너

    • React가 해주는게 없어서… https://prmadi.com/getting-started-with-react-native-app-and-parse/
  21. React Router • React 용 Browser History API 라이브러리 •

    URL에 따라 그려야 할 Component를 매칭
  22. React Router • React 용 Browser History API 라이브러리 •

    URL에 따라 그려야 할 Component를 매칭 • SSR(Server Side Rendering)을 위한 필수 요소
  23. 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'));
  24. Redux-First Routing Model • 일반적으로 많이 사용하는 모델 • 복잡해져따!!!

    https://medium.freecodecamp.org/an-introduction-to-the-redux-first-routing-model-98926ebf53cb
  25. Node.js + Express • React 번들을 provide하기에 제일 적합한건 역시

    • react-hot-loader를 사용해서 개발 효율성 Up! • React SSR 구성하기에 가장 쉽습니다. • 굳이 다른거 쓸 이유가?
  26. webpack • JavaScript 모듈화 도구 • React 번들을 만들기 위한

    빌더 • webpack-dev-server 없으면 개발 못합니다. • 아직도 저장 후 브라우저 새로고침 하세요?!
  27. Babel • ES6+ JS 문법을 브라우저 지원에 맞게 트랜스코딩 •

    React에서 빈번하게 쓰는 import 문법 조차 지원 안함
  28. 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
  29. 간편하게 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
  30. React에서 해서는 안되는 것 #1 • Random value • Render가

    일어날 때마다 값이 바뀌는 패턴을 만들면 망! • `math.random()`나 `new Date()`를 쓸 때 주의
  31. React에서 해서는 안되는 것 #1 • Random value • Render가

    일어날 때마다 값이 바뀌는 패턴을 만들면 망! • `math.random()`나 `new Date()`를 쓸 때 주의 • 한번은 라벨의 배경색을 color list에서 랜덤으로 뽑아 쓰는 코드를 만들었다가 무지개로 빛나는 라벨을 만듬...
  32. React에서 해서는 안되는 것 #2 • Uncontrolled input • 선언적

    렌더링이 불가능하게 만드는 패턴 • Input의 입력값을 잘못 읽어오거나 날릴 수 있다. • Input의 value는 control 되어야 한다. <input value={someValue} onChange={handleChange} />
  33. 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/