22. user = Ember.Object.create({
fullName: 'Kara Gates'
});
UserComponent = Ember.Component.extend({
userName: Ember.computed.oneWay('user.fullName')
});
userComponent = UserComponent.create({
user: user
});
// Changing the name of the user object changes
// the value on the view.
user.set(‘fullName', 'Krang Gates');
// userComponent.userName will become "Krang Gates"
// ...but changes to the view don't make it back to
// the object.
userComponent.set('userName', 'Truckasaurus Gates');
user.get(‘fullName'); // "Krang Gates"
33. XML 스타일의 코드를 작성할 수 있게 JavaScript를 확장한 문법
ECMAScript 표준 스펙과는 별개
트랜스파일하여 ECMAScript로 변환
JSX
var dropdown =
<Dropdown>
A dropdown list
<Menu>
<MenuItem>Do Something</MenuItem>
<MenuItem>Do Something Fun!</MenuItem>
<MenuItem>Do Something Else</MenuItem>
</Menu>
</Dropdown>;
render(dropdown);
34. JavaScript로 DOM 엘리먼트 생성하는
코드 넘 구린 듯!
차라리 템플릿이 나은 듯!
인정!
JSX 쓰면 어떰?
으악! 저게 머임!
님 관심사 분리 모름?
누가 요즘 JavaScript 코드 안에 HTML 씀?
35. JavaScript로 DOM 엘리먼트 생성하는
코드 넘 구린 듯!
차라리 템플릿이 나은 듯!
인정!
JSX 쓰면 어떰?
으악! 저게 머임!
님 관심사 분리 모름?
누가 요즘 JavaScript 코드 안에 HTML 씀?
HTML이랑 JavaScript를 분리한다고
관심사 분리가 됨?
36. 복잡성을 덜기 위해 관심사를 분리
HTML과 JavaScript의 분리는 관심사가 아닌 기술의 분리
관심사란
객체가 맡고 있는 책임
37. 어떤 입력을 처리하고, 무엇을 보여줄 것인가?
재사용할 수 있는 대상은 주로 컴포넌트
진짜 관심사는,
UI 인터랙션
41. function addElement () {
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent);
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
42. var html="";
html += "<div class="content" data-jiis="cc" id="main"><span class="ctr-p">";
html += " <div style="height:233px;margin-top:89px" id="lga">";
html += " <div style="padding-top:109px">";
html += " <div title="Google" align="left" id="hplogo">";
html += " <div nowrap="">한국</div>";
html += " </div>";
html += " </div>";
html += " </div>";
html += " <div style="height:118px"></div>";
html += " <div data-jibp="h" data-jiis="uc" id="prm-pt"></div>";
html += " <div class="ctr-p" id="footer">";
html += " <div data-jibp="h" data-jiis="uc" id="fbarcnt" ></div>";
html += " </div>";
html += " <div data-jibp="h" data-jiis="uc" id="footc">";
html += " <div id="xfoot">";
html += " <div id="xjsd">";
html += " </div>";
html += " <div id="xjsi">";
html += " </div>";
html += " </div>";
html += " </div>";
html += "</div>";
document.body.innerHTML = html;
44. DSL(특정 도메인 전용 논리 언어) 추가 학습비용
DSL의 낮은 표현력
템플릿(Template)도 조금 부족해
<ul>
{{#each items}}
<li>{{agree_button}}</li>
{{/each}}
</ul>
var context = {
items: [
{name: "Handlebars", emotion: "love"},
{name: "Mustache", emotion: "enjoy"},
{name: "Ember", emotion: "want to learn"}
]
};
Handlebars.registerHelper('agree_button', function() {
var emotion = Handlebars.escapeExpression(this.emotion),
name = Handlebars.escapeExpression(this.name);
return new Handlebars.SafeString(
"<button>I agree. I " + emotion + " " + name + "</button>"
);
});
<ul>
<li><button>I agree. I love Handlebars</button></li>
<li><button>I agree. I enjoy Mustache</button></li>
<li><button>I agree. I want to learn Ember</button></li>
</ul>
46. 바뀐 부분만 다시 그릴 거임!
매번 다시 그리는 건 낭비 아님?
성능에 문제 없음?
47. 님, 장난함?
DOM 상태를 비교한다고?
DOM API 호출하는 비용 무시함?
매번 다시 그리는 건 낭비 아님?
성능에 문제 없음?
바뀐 부분만 다시 그릴 거임!
48. 님, ㄴㄴㄴ
가상의 DOM 객체를 만들어서
비교한 후에 실제 바뀐 부분만 다시 그려주면 됨!
매번 다시 그리는 건 낭비 아님?
성능에 문제 없음?
님, 장난함?
DOM 상태를 비교한다고?
DOM API 호출하는 비용 무시함?
바뀐 부분만 다시 그릴 거임!
49. UI 상태에 대한 정보를 가지고 있는 가상의 표현 객체
ReactElement
ReactDOMTextComponent(ReactText)
Virtual DOM
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
62. Warning: Each child in an array or iterator should
have a unique "key" prop. Check the render
method of `CardThumbnailSlide`. See https://
fb.me/react-warning-keys for more information.
82. 결국 도구일 뿐이고 장점과 단점은 동전의 앞면과 뒷면
문제를 먼저 살피고 도구를 선택하는 것이 현명
그래서,
React 써야 하나요?
83. • World Wide Web - http://info.cern.ch/hypertext/WWW/TheProject.html
• XMLHttpRequest and AJAX on Google Suggest - http://www.infinitezest.com/articles/xmlhttprequest-and-ajax-on-
google-suggest.aspx
• Be Predictable, Not Correct. - https://www.youtube.com/watch?v=h3KksH8gfcQ
• React:Rethinking Best Practices - http://www.slideshare.net/floydophone/react-preso-v2
• React s diff algorithm - http://calendar.perfplanet.com/2013/diff/
• Model-View-Controller(MVC) Its Past and Present - http://heim.ifi.uio.no/ trygver/2003/javazone-jaoo/MVC_pattern.pdf
참고자료
84. 김코딩
email : jeokrang@gmail.com
blog : http://huns.me
facebook : https://www.facebook.com/jeokrang
Facebook Developer Group
https://www.facebook.com/groups/reactist/
감사합니다.