1.
ReactJS서버와 클라이언트에서
동시에 사용하는
김태곤

2.
뉴욕 기반 스타트업인 에서 프론트엔드 개발자로 일하고
있습니다. 그 전에는 에서 여러 서비스와 프로젝트에
참여했습니다. 자바스크립트/웹 개발 관련 서적 6권을 번역했습니다.
자바스크립트 강의를 꾸준히 진행하고 있습니다. 특허도 몇 건 있습니다.
Nodepad++, FPDF, Brackets, code.org, io.js 등의
한국어 번역에도 참여했습니다. 블로그(taegon.kim)와
@taggon을 통해 연락할 수 있습니다.

3.
ReactJS?
Facebook에서 개발
그리고...?

4.
걱정마세요.
여러분은 혼자가 아닙니다.

5.
걱정마세요.
여러분은 혼자가 아닙니다.
from Google Trend

6.
잠깐 눈물 좀 닦고...
이미지 출처 : 마음의 소리

7.
어, 잠깐? 뭔가 이상한데?
눈치빠른 기획자 C씨(32세)

8.
구글 트렌드를 통해 본
ReactJS 상승추세
from Google Trend

9.
오늘 살펴볼 내용
ReactJS 소개와 특징
간단한 ReactJS 사용법
동형(同形) 자바스크립트 Isomorphic JavaScript

10.
ReactJS 소개
정식 명칭은 React입니다.

11.
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
사용자 인터페이스를 만드는 자바스크립트 라이브러리

12.
Model
View
Controller

13.
Model
View
Controller

14.
Model
View
Controller
: 컴포넌트를 통한 View 표현만 담당

15.
컴포넌트
재사용 가능한 UI 구성 단위
컴포넌트끼리 결합, 포함 관계
데스크톱/모바일 네이티브 앱의 개발 방식

16.
컴포넌트
버튼 컴포넌트
탭 컴포넌트
슬라이더
컴포넌트
텍스트 입력
컴포넌트
체크박스
컴포넌트

17.
컴포넌트
재사용 가능한 UI 구성 단위
컴포넌트끼리 결합, 포함 관계

18.
컴포넌트
재사용 가능한 UI 구성 단위
컴포넌트끼리 결합, 포함 관계
TodoApp
TodoInput
TodoList
TodoItem

19.
var TodoList = React.createClass({
render : function(){
return (
<ul>
{this.props.items.map(function(item, idx){
return <TodoItem key={idx} text={item.text} />;
})}
</ul>
);
}
});
var TodoApp = React.createClass({
render : function(){
return (
<section>
<h1>todos</h1>
<TodoList items={this.state.items} />
</section>
);
}
});
컴포넌트

20.
컴포넌트는 어떤 기준으로 나눠야 하나요?
뉴욕에 사는 웹 개발자 S씨(26세)

21.
ReactJS의 특징
JSX
Virtual DOM
단방향 데이터 흐름

22.
JSX
JS 코드에 XML을 직접 표현
var Acomponent = React.createClass({
render : function(){
return (
<div>
<h3>TODO</h3>
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
: JavaScript XML

23.
JSX
JS 코드에 XML을 직접 표현
var Acomponent = React.createClass({
render : function(){
return (
React.createElement('div', null,
React.createElement('h3', null, 'TODO'),
React.createElement('form', {onSubmit:this.handleSubmit},
React.createElement('input', {onChange:..., value:...}),
React.createElement('button', null,
'Add #' + (this.state.items.length + 1)
)
)
)
);
}
});
: JavaScript XML
JS 코드로 컴파일

24.
var Acomponent = React.createClass({
render : function(){
return (
React.createElement('div', null,
React.createElement('h3', null, 'TODO'),
React.createElement('form', {onSubmit:this.handleSubmit},
React.createElement('input', {onChange:..., value:...}),
React.createElement('button', null,
'Add #' + (this.state.items.length + 1)
)
)
)
);
}
});
JSX
JS 코드에 XML을 직접 표현
: JavaScript XML
JS 코드로 컴파일
JSXTransformer

25.
웩~ 이 문법 꼭 사용해야 합니까?
까칠한 개발자 K씨(36세)

26.
JSX
컴파일 된 형태를 직접 사용하면 JSX 생략 가능
: JavaScript XML
var Acomponent = React.createClass({
render : function(){
return (
React.createElement('div', null,
React.createElement(MyCustomElement),
React.createElement('h3', null, 'TODO'),
React.createElement('form', {onSubmit:this.handleSubmit},
React.createElement('input', {onChange:..., value:...}),
React.createElement('button', null,
'Add #' + (this.state.items.length + 1)
)
)
)
);
}
});

27.
JSX
React.DOM의 태그 이름 메소드를 사용하면 편리
: JavaScript XML
var Acomponent = React.createClass({
render : function(){
var DOM = React.DOM;
return (
DOM.div(null,
React.createElement(MyCustomElement),
DOM.h3(null, 'TODO'),
DOM.form({onSubmit:this.handleSubmit},
DOM.input({onChange:..., value:...}),
DOM.button(null, 'Add #' + (this.state.items.length + 1))
)
)
);
}
});

28.
Virtual DOM
잠시 DOM 좀 까겠습니다.

29.
DOM
일관성이 없다.
: 브라우저마다 구현에 차이가 있다. 렌더링 버그.
테스트하기 쉽지 않다.
: JS만으로는 테스트가 어려워 반드시 브라우저가 필요
느리다.
: 가능하면 DOM은 건드리지 않는 편이 성능에 이득

30.
: 메모리 상에 DOM 구성. DOM 비교를 통해 업데이트 된 부분만 갱신.
Virtual DOM
일관성이 있다.
: 브라우저에 의존적이지 않다.
테스트하기 쉽다.
: 순수 JS만으로 구현.
빠르다.

31.
Virtual DOM 빠르다.은
목록 항목 <li> 1000개 렌더링 시간 | http://goo.gl/4dKdPz

32.
Virtual DOM 빠르다.은
목록 항목 <li> 1000개 렌더링 시간 | http://goo.gl/4dKdPz

33.
Virtual DOM 빠르다.은
목록 항목 <li> 1000개 렌더링 시간 | http://goo.gl/4dKdPz

34.
Virtual DOM 빠르다.은
React.js Conf 2015 - Hype! | http://youtu.be/z5e7kWSHWTg?t=2m29s
EmberAngularJSReactvsvs

35.
: 메모리 상에 DOM 구성. DOM 비교를 통해 업데이트 된 부분만 갱신.
Virtual DOM
일관성이 있다.
: 브라우저에 의존적이지 않다.
테스트하기 쉽다.
: 순수 JS만으로 구현.
빠르다.
DOM 비교 알고리즘
: http://calendar.perfplanet.com/2013/diff/ 참고

36.
단방향 데이터 흐름
이해하기 쉽다.
: 데이터의 흐름이 일방 통행이라 이해하기가 쉽다. 상위 컴포넌트 → 하위 컴포넌트
하위 컴포넌트의 변화는 이벤트를 통해 감지한다.
: 상위 컴포넌트는 하위 컴포넌트에 이벤트를 추가해 이벤트 감지

37.
var TodoList = React.createClass({
render : function(){
return (
<ul>
{this.props.items.map(function(item, idx){
return <TodoItem key={idx} text={item.text} onChange={this.props.onToggle} />;
})}
</ul>
);
}
});
var TodoApp = React.createClass({
render : function(){
return (
<section>
<h1>todos</h1>
<TodoList items={this.state.items} onToggle={this.onToggle} />
</section>
);
}
});
단방향 데이터 흐름
props = 상위 컴포넌트에서 받은 값(수정 불가)
states = 자기 자신이 가지고 있는 값(수정 가능)

38.
var TodoList = React.createClass({
render : function(){
return (
<ul>
{this.props.items.map(function(item, idx){
return <TodoItem key={idx} text={item.text} onChange={this.props.onToggle} />;
})}
</ul>
);
}
});
var TodoApp = React.createClass({
render : function(){
return (
<section>
<h1>todos</h1>
<TodoList items={this.state.items} onToggle={this.onToggle} />
</section>
);
}
});
단방향 데이터 흐름
이벤트는 아래에서 위로 발생한다.

39.
동형 자바스크립트 Isomorphic JavaScript
동형(同形) = 같은 모양
클라이언트와 서버가 같은 코드를 공유한다.
Client-side Server-side-

40.
동형 자바스크립트 Isomorphic JavaScript
Client-side Server-side-
Routing
View Layer
Application
Logic
PersistentDOM, UX
Source: http://www.slideshare.net/spikebrehm/jsconf-us-2014-building-isomorphic-apps

41.
동형 자바스크립트 Isomorphic JavaScript
PHP with V8JS 익스텐션 구조
요청
응답 + HTML
ApplicationBrowserify

42.
동형 자바스크립트 Isomorphic JavaScript
PHP - Node.js 렌더링 서버 구조
Source: http://bensmithett.github.io/going-isomorphic-with-react/#/42
요청
HTML
JSON
응답
ApplicationBrowserify

43.
동형 자바스크립트 Isomorphic JavaScript
Ruby, Python 등의 구현은 github.com/reactjs 참고
웹 애플리케이션 구조는
github.com/gpbl/isomorphic-react-template 참고

44.
그래서 얻는 이점이 뭐요?
신중한 프로젝트 매니저 P씨(40세)

45.
동형 자바스크립트 Isomorphic JavaScript
동형(同形) = 같은 모양
클라이언트와 서버가 같은 코드를 공유한다.
반복 작업 제거
사용자 경험 향상
검색 엔진 최적화

46.
약은 약사에게, 화면은 자바스크립트에게
약파는 JSCon 발표자 K씨(36세)

47.
오늘 살펴볼 내용
ReactJS 소개와 특징
간단한 ReactJS 사용법
동형(同形) 자바스크립트 Isomorphic JavaScript
... One more thing!

48.
비슷한 컨셉은 이미 많습니다.
AngularJS의 Directive
HTML5의 Web Component
PolymerJS
X-tags, SkateJS, RiotJS ...

49.
React는 그 이상입니다.
React Native:
React를 사용해 네이티브 모바일 앱 작성
e.g.) Facebook Groups
React Canvas:
React를 사용해 DOM 대신 Canvas에 엘리먼트 표현

50.
React Native
Mobile OS의 네이티브 UI를 JS로 조작
별도 쓰레드에서 동작하는 JS와 비동기 통신
컴포넌트 종류는 다르지만 쓰던 React 방식 그대로
공식 웹 사이트 : http://native.reactjs.com

51.
React Native
React.js Conf 2015 - A Deep Dive into React Native | https://youtu.be/7rDsRXj9-cU?t=3m26s

52.
Learn Once, Write Anywhere
한 번 배워 어디서든 써먹자

53.
그 밖의 React 관련 정보
큐레이션 목록
https://github.com/enaqx/awesome-react

54.
감사합니다.