이제는 대세인 React.js! 이번 시간에는 리액트에 대해 가능하면 간단히 소개해 보려고 합니다.
React.js란
React.js 는 유저인터페이스 (UI) 의 파트를 만들기위한 자바스크립트의 라이브러리이며, Facebook이 만들고 오슨소스로 공개하고 있습니다.
React.js가 주목을받는 이유
- Facebook 이 만듬
- 프론트 엔드의 개념을 근본적으로 뒤집음
- Virtual DOM (가상 DOM)
- 컴포넌트 지향
- 리액티브 프로그래밍
- 함수형 언어 (프로그래밍)
리액티브 (Reactive) 프로그래밍이란
React의 이름의 유래가되었다고 생각됩니다.
리액티브 프로그래밍은 '반응하는 부분' 과 '인식하는 부분' 를 나누어 생각하고 반응하는 부분에 대해 자동으로 대응하는 개념입니다.
React.js의 설명은 반드시 트리 구조의 그림이 나옵니다. 요소가 변경되면 단방향 흐름에 관련된 요소도 변경된다는 것을 나타냅니다.
React.js를 도입하는 이유
성능이 좋습니다 (가상 DOM의 엄청난 속도)
규모가 커져도 관리하기 쉽습니다
jQuery와 Backbone.js, Angular.js은 규모가 커졌을 때 관리하기가 어렵습니다
반대로, React.js 작은 응용 프로그램을 신속하게 개발하기위한 라이브러리가 없는 것으로 알려져 있습니다.
대응 브라우저
브라우저가 html5에 대응하고있는 것이 조건. 소위 모던 브라우저라면 움직입니다.
IE8 다음과 같은 오래된 브라우저라면, html5shiv.js 등을 도입해서 html5 상응하는 기능을 갖게한 두 대응가능합니다 (Polyfills).
공식 사이트에 브라우저에 대해 쓰여져 있습니다.
http://facebook.github.io/react/docs/working-with-the-browser.html
실제로 React.js가 움직이는 것을보고 싶다면
React.js는 Facebook이 만들어 있기 때문에, Facebook의 화면 (UI)이 참고가된다고 생각합니다.
최근 주목 편집기 GitHub의 ATOM ( https://atom.io/ )도 그렇습니다.
위에서 소개 한 ElementalUI ( http://elemental-ui.com/ )도 참고가된다고 생각합니다.
실제로 쓰려면
실제로 사용하기 위해서는 facebook의 React.js 파일을 아래와 같이 로드를 해야 합니다.
<script src = "http://fb.me/react-0.13.3.js" > </ script>
<script src = "http://fb.me/JSXTransformer-0.13.3.js" > </ script>
브라우저에서 쉽게 코딩할 수도
jsfiddle
- with JSX (JSX를 사용) http://jsfiddle.net/vjeux/kb3gN/
- without JSX (JSX 없음) http://jsfiddle.net/vjeux/VkebS/
JSX 대해
JSX는 Facebook이 개발 한 독자적인 태그 기술입니다. React.js는 보통 JSX을 사용하기 위해 미리 컴파일이 필요하지만, 개발자는 신경 쓸 필요가 없습니다. JSXTransfomer가 자동으로 해줍니다.
꼭 fb.me (Facebook)의 js 를 온라인에서 로드해야 하나?
공식 사이트에서 스타터 키트를 다운로드 React.js 파일을 구하는 방법도 있습니다.
http://facebook.github.io/react/
어느 기업이 도입 하고 있나?
개발하고있는 Facebook과 Instagram은 물론, Yahoo와 Airbnb,
GitHub의 ATOM ( https://atom.io/ ) 등.
참고 사이트
공식 사이트 튜토리얼
https://facebook.github.io/react/docs/tutorial.html
공식 사이트 Example
https://github.com/facebook/react/wiki/Examples
TodoMVC
http://todomvc.com/
ElementalUI
http://elemental-ui.com/