2. 뉴욕 기반 스타트업인 에서 프론트엔드 개발자로 일하고
있습니다. 그 전에는 에서 여러 서비스와 프로젝트에
참여했습니다. 자바스크립트/웹 개발 관련 서적 6권을 번역했습니다.
자바스크립트 강의를 꾸준히 진행하고 있습니다. 특허도 몇 건 있습니다.
Nodepad++, FPDF, Brackets, code.org, io.js 등의
한국어 번역에도 참여했습니다. 블로그(taegon.kim)와
@taggon을 통해 연락할 수 있습니다.
39. : 메모리 상에 DOM 구성. DOM 비교를 통해 업데이트 된 부분만 갱신.
Virtual DOM
일관성이 있다.
: 브라우저에 의존적이지 않다.
테스트하기 쉽다.
: 순수 JS만으로 구현.
빠르다.
DOM 비교 알고리즘
: http://calendar.perfplanet.com/2013/diff/ 참고
40. 단방향 데이터 흐름
이해하기 쉽다.
: 데이터의 흐름이 일방 통행이라 이해하기가 쉽다. 상위 컴포넌트 → 하위 컴포넌트
하위 컴포넌트의 변화는 이벤트를 통해 감지한다.
: 상위 컴포넌트는 하위 컴포넌트에 이벤트를 추가해 이벤트 감지
41. 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 = 자기 자신이 가지고 있는 값(수정 가능)
42. 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>
);
}
});
단방향 데이터 흐름
이벤트는 아래에서 위로 발생한다.
43. 동형 자바스크립트 Isomorphic JavaScript
동형(同形) = 같은 모양
클라이언트와 서버가 같은 코드를 공유한다.
Client-side Server-side-