React.js란?

디자이너나 프론트엔드 개발자가 React.js 입문하는데 도움이 되는 글입니다.

'최근 React.js라는 게 있던데 어떤거야?'라는 의문을 가지셨던 분들이 대상입니다.

React..js란

React.js는 UI 파트(구성부분) 을 만들기 위한 라이브러리입니다.

Facebook이 oos로 공개했습니다.

React.js는 어떤 경우에 사용하는가?

예를 들면 아래처럼 id로 'dentaku'를 지정하면

'전자계산기 폼이 표시되고 버튼을 누르면 계산도 할 수 있다'

이런 부품을 만들고자 하는데 적합합니다.

//sample.html <html> <body> <div id ='dentaku'></div> ... </body> </html>

이미 전 세계의 개발자들이 React.js로 UI 파트를 열심히 만들고 있습니다.

date Picker의 예

이하는 스크린샷입니다. 실제 조작은 ElementalUI의 사이트를 참고해주세요.

디자이너와 엔지니어를 위한 어드바이스

React.js의 장점이 발휘되는 때는 버튼(<input type ='button'>...)이나 텍스트(<input type=''text">...)등이 가득 있고 입력한 값을 바로 표현하게 되는 화면입니다.

데스크탑 어플리케이션의 UI/UX 설계의 이미지입니다.

코더라면 React.js의 코드 작성 방법에 익숙해질 필요가 있다고 생각합니다(조금은 독특하기 때문에);

React.js는 jQuery처럼 애니메이션 부분이 특기인 것은 아니라서 보여주는 방식, 표현 등의 이용에 적합하지는 않습니다.

(애니메이션 부분은 React 차기 개발 과제로 거론되고 있다고 합니다)

실제로 React.js가 동작하는 곳을 보고 싶다면

React.js는 Facebook이 만들고 있기 때문에 Facebook의 화면(UI)를 참고할 수 있을 것입니다.

최근 주목받고 있는 에디터 GitHub의 ATOM(https://atom.io/)도 그렇습니다.

위에서 소개한 ElementalUI(http://elemental-ui.com)도 참고할 수 있습니다.

어떤 기업에서 도입하고 있어?

개발을 하고 있는 Facebook이나 Instagram은 물론 Yahoo나 Airbnb, GitHub의 ATOM(https:..atom.io) 등

React.js는 라이브러리? 프레임워크?

React.js는 M-V-C (M-V-MV) 에서 이야기하는 View의 일부 기능을 제공하는 라이브러리(컴포넌트 = UI 부품)입니다.

따라서 비교 대상으로 자주 거론되는 Backbone.js나 Angular.js와도 같이 사용할 수 있습니다.

React.js의 메리트는?

퍼포먼스가 좋다(가상 DOM이 빠르게 동작한다!)

[참고] 리얼 DOM은 느리고 가상 DOM (React.js)는 빠르다(일본어)

규모가 커져도 관리가 편하다

jQuery나 Backbon.js, Angular.js는 규모가 커지면 관리가 어렵습니다.

한편으로 React.js는 작은 어플리케이션을 빠르게 개발하기 위한 라이브러리는 아니라는 평가도 있습니다.

어떤 환경에서도 도입할 수 있어?

브라우저가 html5에 대응할 수 있는 것이 조건입니다. 모던 브라우저에서는 동작할 수 있습니다.

IE8이하나 오래된 브라우저는 html5shiv.js등을 도입해서 html5에 해당하는 기능을 구성해서 대응합니다(Polyfills).

공식 사이트에서 대응 브라우저에 대한 내용을 확인할 수 있습니다.

실제로 써보고 싶다

facebook의 React.js 파일을 읽어들입니다(6/21 시점의 최신 버전은 0.13.3).

//sample.html <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>

이것으로 최소한의 준비가 완료되었습니다.

fb.me (Facebook)의 js를 직접 지정해야만 하나?

공식 사이트에서 스타트킷을 다운로드해서 React.js 파일을 사용하는 방법도 있습니다.

JSX에 대해

React.js는 통상 JSX(Facebook이 개발한 독자적인 태그 기술)을 사용하기 때문에 프리 컴파일이 필요합니다만 개발자는 의식할 필요는 없습니다.

JSX Transfomer가 자동으로 해줍니다.

하지만 일정 수준의 어플리케이션이 되면 자동 컴파일까지 시간이 걸리기 때문에 미리 수동으로 빌드하는 것을 추천합니다.

react-tools에 따른 JSX의 빌드(임의)

Node.js, npm을 인스톨해서

$npm install -g react-tools

src의 jsx 파일을 변환해 dest에 보존

$jsx -x jsx --watch src/ dest/

가장 간단한 샘플 코드

이하의 코드를 복사해서 html 파일에 저장해서 브라우저로 열어보세요.

//sample.html <!DOCTYPE html><html> <head> <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <div id="app"></div>   <script type="text/jsx"> var HelloWorld = React.createClass({ // <HelloWorld />렌더링（표시） render: function() { return ( <p>Hello!World!</p> ); } }); // id='app'에<HelloWorld />를 주입한다 （마운트） var m = React.render(<HelloWorld />, document.getElementById('app')); </script> </body></html>

입력 폼을 사용한 샘플 코드(Web _ DB vol.86)

아래 코드를 복사해서 html 파일에 저장해서 브라우저에서 열어보세요.

//sample2.html <!DOCTYPE html><html> <head> <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <div id="app"></div> <script type="text/jsx"> // 부모：<Parent /> 정의 var Parent = React.createClass({ // State（※상태는 부모가 관리） // 이 값은 브라우저를 닫거나 리로드 할 때까지 보존된다 getInitialState: function () { return { textVal: "", children: [] }; }, // State(textVal)의 변환 setStateTextVal: function(textVal) { this.setState({ textVal: textVal }); }, // State(children)을 변경 setStateChildren: function(textVal) { var textVals = this.state.children.concat(textVal); this.setState({ children: textVals }); }, // <Parent />의 표시 // 여기서 자식이 되는<ChildInput />과<Child />을 기술 render: function() { return ( <div> <p>入力してEnterキーを押す</p> <ChildInput onChange={this.setStateTextVal} onSave={this.setStateChildren} /> <Child textVal={this.state.textVal} children={this.state.children} /> </div> ); } }); // 자식1：<ChildInput />의 정의（※props를 통해 부모를 참조할 수 있다） var ChildInput = React.createClass({ _onChange: function (e) { this.props.onChange(e.target.value); }, _onKeyDown: function (e) { if (e.keyCode === 13) { // Enter키 this.props.onSave(e.target.value); e.target.value = ""; } }, // <ChildInput />의 표시 render: function() { return <input type="text" onChange={this._onChange} onKeyDown={this._onKeyDown} />; } }); // 자식2：<Child />의 정의（※props통해서 부모를 참조할 수 있다） var Child = React.createClass({ // <Child />의 표시 render: function() { var key = 0; var textVals = this.props.children.map(function (textVal) { // 시간이 같다. 즉 키가 눌러질 때마다 한꺼번에 재묘사 되고 있는 점에 주목 //（서버사이드와 닮아있다고 평가되는 이유） var date = new Date().toString(); return <li key={key++}>{key}.{textVal}({date})</li>; }); return ( <div> <p>{this.props.textVal}</p> <ul>{textVals}</ul> </div> ); } }); // id='app' 에 <Parent />를 표시한다.<마운트） var m = React.render(<Parent />, document.getElementById('app')); </script> </body></html>

브라우저에서 간단하게 코드를 시험해볼 수도 있습니다.

jsfiddle

with JSX（JSX을 사용） http://jsfiddle.net/vjeux/kb3gN/

without JSX（JSX없음） http://jsfiddle.net/vjeux/VkebS/

주목을 받고 있는 이유

Facebook에서 만들었다

프론트엔드의 사고방식을 근본에서부터 뒤집었다

Virtual DOM

컴포넌트 지향

리액티브 프로그래밍

함수형 언어(프로그래밍)

리액티브(Reactive) 프로그래밍

React의 이름의 유래이기도 하다고 생각합니다.

리액티브 프로그래밍이란 '반응하는 측'과 '인식하는 측'을 분리해서 생각해 반응에 대해서 자동적으로 대응한다는 사고 방식입니다.

React.js의 설명에서는 꼭 트리 구조의 그림이 나옵니다. 어떤 요소가 갱신되면 단방향의 흐름으로 관계지어져 있는 요소도 변경된다라는 것을 나타내고 있습니다.

왜 지금, 함수형언어(프로그래밍)이 주목받고 있는가

함수형언어의 대표는 Lips. JavaScript와 Scala는 함수형언어처럼 쓸 수 있는 언어라고 하는 편이 옳을지도 모르겠습니다. 함수형처럼 쓰면 거의 단순한 함수(식)의 집합체가 되기 때문에 느슨한 결합이 되고 스테이트(상태)의 관리가 간단해 집니다. 서버측 철리의 경우 병렬 처리(멀티 스레드)가 쓰기 뒤어진다 등의 메리트도 있습니다.