ReactJS로 시작하는 멀티플랫폼 개발하기

김태곤
ReactJS로 시작하는
멀티 플랫폼 개발하기

오늘 소개할 내용
• ReactJS
• Server-side rendering
• React Native
• Desktop Web App
• React Native Desktop

페이스북, 인스타그램같은
크고 복잡한 애플리케이션 제작을 위한
라이브러리 필요

MVC는
적합하지 않음
복잡한 UI에
끊임없이 변하는
M, V ,C가 상호 의존적인 구조
과도하게 연결된 컨트롤러
어디서 변할 지 모르는 모델

어쩌냥..
아!
재사용 가능한
UI 컴포넌트를 만드는
뷰 전용 라이브러리를
개발하면 되겠고냥
※ 실제로 고양이가 만든 건 아닙니다

멋진 웹 사이트를
만든다고 
생각해봅시다

멋진 웹 사이트를
만든다고 
생각해봅시다
여러 개

필요한 부품을
웹 사이트마다
새로 만든다면?

그래서 부품을 
미리 정의하고 
조립해서 
결과물을 만듭니다.

웹은 이미
많은 컴포넌트의
조합입니다.

웹은 이미
많은 컴포넌트의
조합입니다.
CSS
HTML
JS

웹은 이
많은 컴
조합입
HTML
일단 여기에 집중해 봅시다

jQuery UI 탭 패널을 위해 필요한 HTML 코드
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
웹은 이
많은 컴
조합입
HTML
태그는 충분한가요?

웹은 이
많은 컴
조합입
HTMLjQuery UI 탭 패널을 만들 때 필요한 HTML 코드
<div id="tabs">
<ul>
</ul>
</div>
</div>
</div>
</div>

웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
</ul>
</div>
</div>
</div>
</div>
<li><
ListItem이지만 사실은 탭
<div
Division이지만 사실은 탭 패널
의미가 맞지 않는 태그를 컴포넌트로 사용심지어 기능을 정의/사용하는 코드(JS)는 별도 파일에 작성

웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
</ul>
</div>
</div>
</div>
</div>
<li><
ListItem이지만 사실은 탭
<div
Division이지만 사실은 탭 패널
의미가 맞지 않는 태그를 컴포넌트로 사용
심지어 기능을 정의/사용하는 코드(JS)는 별도 파일에 작성

웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
</ul>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
<script>
jQuery(function($) {
$( "#tabs" ).tabs({
active: 1
});
});
</script>
의미가 더 명확한 쪽은?
<Tabs selectedIndex={1}>
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
<Tab>Three</Tab>
</TabList>
<TabPanel>
</TabPanel>
<TabPanel>
</TabPanel>
<TabPanel>
</TabPanel>
</Tabs>

가상 DOM
JSX 문법
단방향 데이터 흐름
Virtual DOM
One-way data flow

가상 DOM JSX 문법 단방향 데이터 흐름
- 스토얀 스테파노프, Yahoo YSlow 아키텍트
“자바스크립트에서 DOM 접근은 가능한 최소화하라”

• 메모리에 가상의 DOM 트리를 구축

• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
Before After

• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
Before After

• 임의의 두 트리를 비교하는 최소 횟수는 O(n^3), 
React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화
Before After

• 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡,  
자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해 
노력 대비 꽤 나은 성능 보장
Before After

React.js Conf 2015 - Hype! | http://youtu.be/z5e7kWSHWTg?t=4m10s
Angular ReactEmber

• Google은 2015년 7월에 Incremental DOM이라는  
Virtual DOM 라이브러리 발표
• Ember는 Glimmer라는 Virtual DOM 기술 적용
Virtual DOM != Silver Bullet
Angular 2 alpha 버전은 Virtual DOM 없이 더 나은 성능을 구현
그래도 꽤 나은 선택
http://goo.gl/k4pYbH

• 자바스크립트 안에 XML을 표현하는 문법
var app = <Nav color="blur" />;
• 자바스크립트 코드로 변환해서 사용
var app = React.createElement(Nav, {color:"blue"});
• 속성 표현을 통해 문자열은 물론 자바스크립트 값을 그대로 전달
var app = <Nav color="blur" checked={true} name={name||"!"} />;
• 필수는 아니지만 거의 모든 React 프로젝트가 사용 중

• 데이터는 상위 컴포넌트에서 하위 컴포넌트로만 흐름
• 상위에서 전달받은 값(props)은 수정 불가(immutable)
• 상위 컴포넌트는 하위 컴포넌트의 이벤트를 전달받아 업데이트
• 컴포넌트 내부의 상태는 스테이트(state)에 저장
• Flux: 애플리케이션 수준에서 적용한 단방향 데이터 흐름

render: function(){
}
});
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
require('react')
require('react-dom')
Node.js와 같은 CommonJS 방식 사용

render: function(){
}
});
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
<h1>Hello, world!</h1>
JS에 XML을 바로 쓰는 JSX 문법

render: function(){
}
});
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
<App list={[1, 2, 3]} />,
컴포넌트에 프로퍼티 전달(객체도 가능)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
render: function(){
}
});
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
</script>
</body>
</html>
브라우저에서 해석하게 할 수도 있지만…
번거롭고 불러오는 파일 많고 성능 안 좋고…

보통 프론트엔드 도구를 사용해 미리 변환

render: function(){
}
});
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
프론트엔드 도구를 사용하면

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
ES2015도 이렇게 쓸 수 있습니다

}
});
render: function(){
return (
<div>
</div>
);
}
});
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
<App list={[1, 2, 3]} />
this.props.num
데이터는 위에서 아래로 흐른다.

ReactDOM.render(
<App list={[1, 2, 3]} />,
);
}.
});
render: function(){
return (
<div>
</div>
);
}.
});

ReactDOM.render(
<App list={[1, 2, 3]} />,
}.
});
render: function(){
return (
<div>
</div>
);
}.
});

}.
});
var App = React.createClass({var App = React.createClass({
handleClick: function(event) {
this.setState({clickedElement: event.target});
},
render: function(){
return (
<div>
<Link num={this.props.list[1]} onClick={this.handleClick} />
</div>
);
}
});

return <a href={"/path/to/"+this.props.num}
onClick={this.props.onClick}>Link</a>;
}.
});
},
render: function(){
return (
<div>
</div>
);
}
});

return <a href={"/path/to/"+this.props.num}
onClick={this.props.onClick}>Link</a>;
}.
});
},
render: function(){
return (
<div>
</div>
);
}
});
onClick={this.props.onClick}
onClick={this.handleClick}
},
이벤트를 통해 하위 컴포넌트가
상위 컴포넌트에 값을 전달할 수 있다

이미 많은 서비스가 React 사용 중

심지어 페이스북은 알파 버전 사용 중!

참고자료
https://taegon.kim/archives/5288
Flux와 Redux
http://www.slideshare.net/jeokrang/facebook-react-55649927
Facebook은 React를 왜 만들었을까?
http://webframeworks.kr/tutorials/react/es2015-react/
ES2015와 React
http://webframeworks.kr/tutorials/react/getting-started/
React 시작하기

Server-side Rendering
Chapter 2

성능
페이지 로딩 + 자바스크립트 로딩 + 렌더링 = 
초기 구동 속도가 느리다
검색 엔진 최적화
자바스크립트를 실행하지 못하는 크롤러는 
페이지의 콘텐츠를 수집하지 못한다
클라이언트 렌더링의
성능 
매번 전체 페이지를 다시 읽는 것보다 빠름
사용자 경험 
자연스럽게 연결되는 사용자 경험 가능
코드의 일관성 
렌더링 책임은 한 쪽에만 주는 편이 일관성 유지가 쉬움
장점 단점

성능 
페이지 로딩 + JS 로딩 + 렌더링 (+ 데이터 로딩)= 
초기 구동 속도가 느림
검색 엔진 최적화 
자바스크립트를 실행하지 못하는 크롤러는 
페이지의 콘텐츠를 수집하지 못함
단점클라이언트 렌더링의

+ 서버 렌더링클라이언트 렌더링
빈 페이지 App
HTML 문서 전송 JS 전송 후 렌더링빈
콘텐츠를 볼 수 없음

클라이언트 렌더링
App
+ 서버 렌더링
JS 전송 후
DOM에 붙음
HTML 문서 전송
렌더링된
콘텐츠는 볼 수 있지만,
인터랙션은 아직 동작 안함

사용자가 느끼는
웹 사이트 반응 속도는
콘텐츠를 처음 본 시간에
영향을 받는다

render() {
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
앞서 살펴 본 클라이언트 코드

render() {
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
ReactDOM은 브라우저 환경에만 해당
ReactDOM.render

render() {
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
DOM 관련 부분만 별도 파일로 분리
ReactDOM.render
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
render() {
}
}

ReactDOM.render(
<App list={[1, 2, 3]} />,
);
export default App;
import App from './App';
browser.js
App.js
render() {
}
}

render() {
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
);
export default App;
browser.js
App.js

import ReactServer from 'react-dom/server';
서버 렌더링은 react-dom/server 사용
render() {
}
}
var result = ReactServer.renderToString(
<App list={[1, 2, 3]} />
);
export default App;
server.js
App.js

결과물을 HTML 페이지에 출력
<body>
<div id="example">
{{result}}
</div>
</body>
<App list={[1, 2, 3]} />
);
server.js
index.html

결과물을 HTML 페이지에 출력
<body>
<div id="example">
{{result}}
</div>
</body>
<App list={[1, 2, 3]} />
);
server.js
index.html
{{result}}
result

렌더링된 결과물이 서버에서 전송된 예제

Isomorphic JavaScript
서버와 클라이언트가 같은 코드를 공유하는 개발 방식같은 코드를 공유
Client Server
공통
코드

Isomorphic JavaScript
서버와 클라이언트가 같은 코드를 공유하는 개발 방식
Client Server
React
같은 코드를 공유

참고자료
https://taegon.kim/archives/5312
React 애플리케이션의 서버 렌더링
http://isomorphic.net/
React를 비롯한 Isomorphic JavaScript 라이브러리를 소개하는 곳
http://augustl.com/blog/2014/jdk8_react_rendering_on_server/
JDK8(Clojure)에서 React 렌더링하는 법 (영문)
http://www.phpied.com/server-side-react-with-php/
PHP 서버에서 React 렌더링하는 법 (영문)

Virtual DOM DOM
Virtual DOM의 결과물은 DOM이 될 수도 있지만

Virtual DOM DOM
SVG
Canvas
"string"
문자열, SVG, Canvas 등으로 확장 가능

예제: React ART
...
renderGraphic: function(rotation) {
return (
<Group
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}>
<Group x={210} y={135}>
<Shape fill="rgba(0,0,0,0.1)" d={BORDER_PATH} />
<Shape fill="#7BC7BA" d={BG_PATH} />
<Shape fill="#DCDCDC" d={BAR_PATH} />
<Shape fill="#D97B76" d={RED_DOT_PATH} />
<Shape fill="#DBBB79" d={YELLOW_DOT_PATH} />
<Shape fill="#A6BD8A" d={GREEN_DOT_PATH} />
<Group x={55} y={29}>
<Group rotation={rotation} originX={84} originY={89}>
<Shape fill="#FFFFFF" d={CENTER_DOT_PATH} />
<Group>
<Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} />
<Shape d={RING_TWO_PATH} transform={RING_TWO_ROTATE} stroke="#FFFFFF" strokeWidth={8} />
<Shape d={RING_THREE_PATH} transform={RING_THREE_ROTATE} stroke="#FFFFFF" strokeWidth={8} />
</Group>
</Group>
</Group>
</Group>
</Group>
);
}
...

Virtual DOM
Native Component
네이티브 컴포넌트로 확장할 수도 있음

네이티브 컴포넌트
비동기 실행
Flexbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장

비동기 실행
폴리필(Polyfill)
<header> <footer>,
<section> <div> <span>
<img> <a> <strong>
<em> <form> <select>
<input> <textarea>
<button> ...
<View> <Text> <Image>
<ScrollView> <ListView>
<WebView> <PickerIOS>
<NavigatorIOS>
<ActivityIndicatorIOS>
<ProgressViewIOS>
<SwitchIOS>...
<View> <Text> <Image>
<ScrollView> <ListView>
<WebView>
<DrawerLayoutAndroid>
<ProgressBarAndroid>
<SwitchAndroid>
<ViewPagerAndroid> ...

비동기 실행
폴리필(Polyfill)
• 자바스크립트는 네이티브보다 훨씬 느리기 때문에 동기 실행시
네이티브 UI와 자바스크립트 간의 병목 현상 발생
• 네이티브와 자바스크립트 사이에 메시지 큐를 두어 비동기 실행
JS VM Native
Java/C++/ObjC/Switft

비동기 실행
폴리필(Polyfill)
• CSS와 구조가 비슷한 StyleSheet 객체 사용
• CSS3 Flexbox와 비슷한 방식으로 레이아웃 스타일링
var ReactNative = React.createClass({
return (
<View style={styles.row}>
<View style={styles.text}>
<Text style={styles.title}>React Native</Text>
<Text style={styles.subtitle}>Build mobile apps using React</Text>
</View>
</View>
);
},
});
var styles = StyleSheet.create({
row: { flexDirection: 'row', margin: 40 },
text: { flex: 1, justifyContent: 'center'},
title: { fontSize: 11, fontWeight: 'bold' },
subtitle: { fontSize: 10 },
});

xbox 레이아웃
폴리필(Polyfill)
• XHR, requestAnimationFrame, navigator.geolocation 등
익숙한 자바스크립트 기능 제공
var GeoInfo = React.createClass({
getInitialState: function() {
return { position: 'unknown' };
},
componentDidMount: function() {
navigator.geolocation.getCurrentPosition(
(position) => this.setState({position}),
(error) => console.error(error)
);
},
return (
<Text>
Position: {JSON.stringify(this.state.position)}
</Text>
);
},
});

리필(Polyfill)
• Java(Android), ObjectiveC/Swift (iOS)로 작성된 
네이티브 모듈을 손쉽게 자바스크립트 모듈로 바인딩
// Java
public class MyCustomModule extends ReactContextBaseJavaModule {
// Available as NativeModules.MyCustomModule.processString
@ReactMethod
public void processString(String input, Callback callback) {
callback.invoke(input.replace("Goodbye", "Hello"));
}
}
// JavaScript
...
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
...

$ brew install node watchman
$ node install -g react-native-cli
필요한 패키지 설치 (Xcode 및 안드로이드 SDK 필수)
프로젝트 생성
$ react-native init HelloWorld
프로젝트 오픈 후 컴파일
$ cd HellWorld
$ open ios/HelloWorld.xcodeproj (iOS)
$ react-native run-android (Android)
코드는 index.{ios, android}.js 파일 수정

데모
• 기본 네이티브 컴포넌트만 사용
• React에 익숙하지 않은 상태에서 
대략 20시간 소요
• 네이티브와 똑같은 무한 스크롤 성능
https://www.youtube.com/watch?v=fRaC9jECxCg

페이스북의 AdManager 개발 사례
• iOS 개발 후 안드로이드 버전 개발
• 각 플랫폼에 맞는 네이티브 룩앤필
• 전체 코드의 85% 가량을 재사용
• 두 플랫폼의 저장소 통합 관리

안 배워도 되겠네요?
이제 네이티브를

ReactJS로 시작하는 멀티플랫폼 개발하기

JS 모르고 jQuery만 알면 되던가요?
결국 네이티브라는 장애물을 넘어야 합니다.

물론 남이 삽질해주길 기다리는 방법도 있죠

삽질의 결과물은 react.parts에서...

참고자료
https://realm.io/kr/news/react-native/
리액트 네이티브로 시작하는 앱 개발 #1
http://react.parts/
React 네이티브 컴포넌트
https://rnplay.org/
React Native Playground

이미 거의 끝났습니다.
웹 앱이 완성됐다면 데스크톱 앱은

약간의 양념만 있으면 되쥬. 솨아~

은..
크로미움 엔진과 Node.js가 합쳐진 데스크톱 애플리케이션 런타임

은..
코드 하나로 맥, 리눅스, 윈도우 플랫폼과 32/64비트 모두 지원
</>

이미 많은 기업에서 사용 중
은..

최근 워드프레스는 Calypso라는 프로젝트를 통해
wordpress.com의 프론트엔드를 모두 대체

React + Node.js 서버를 사용한 Isomorphic JavaScript
동일한 코드를 Desktop App에도 사용

React 앱 패키징
$ npm install -g electron-packager 
$ cd HelloWorld
$ electron-packager . HelloWorldApp --platform=all --arch=x64 --version=0.35.4
HelloWorld
├─ package.json
└┬ src
├─ index.html
├─ main.js
├─ other.js
└─ style.css
폴더 구조를 왼쪽과 같이 작성한 후...
단, OS X / Linux에서 Windows 앱을 빌드하려면 wine 필요wine

참고 자료
https://github.com/chentsulin/electron-react-boilerplate
Electron과 React를 사용한 데스크톱 앱 프로젝트 시작 틀
https://github.com/sindresorhus/awesome-electron
Electron 관련 정보를 모아 둔 페이지
https://github.com/gabrielbull/react-desktop
데스크톱 환경에 사용할 수 있는 React UI 컴포넌트 모음

React Native Desktop
Chapter 5

그래도 네이티브가 더 좋다면?
image from 이말년씨리즈
데스크톱 웹 앱 좋은 거 알겠는데

데스크톱 네이티브? 원한다면 주도록 하지
잘 찾아봐. GitHub에 두고 왔으니…
image from 원피스

React Native를
포크한 프로젝트라
사용법도 비슷합니다
예제 실행방법
$ git clone https://github.com/ptmt/react-native-desktop 
$ cd react-native-desktop && npm install
Examples 아래의 원하는 폴더로 가서 .xcodeproj 파일을 XCode에서 열고 컴파일

Hello World 앱 크기 비교
React Native Desktop
3.5MB
105.3MB
(OS X 빌드 기준)

하지만
image from 수퍼마리오

윈도우 버전도 없고 (OSX만 지원)

기능도 적고 불안정합니다

실무에는 절대로 사용하지 마세요!
개발 초기라 매우 불안정하니

Once, WriteLearn Anywhere
한 번 배워 어디서나 개발하자

https://taegon.kim
@taggon
Thank You!
facebook.com/groups/react.ko
...and

Credits
Twitter and Wordpress icons are made by Freepik from www.flaticon.com
All images without any notes are published under Creative Commons zero.
All videos are published under Creative Commons zero.

ReactJS로 시작하는 멀티플랫폼 개발하기

More Related Content

What's hot (20)

Similar to ReactJS로 시작하는 멀티플랫폼 개발하기 (20)

More from Taegon Kim (11)

ReactJS로 시작하는 멀티플랫폼 개발하기