쿠...sal: [컴][웹] 간단한 React 사용

node.js 설치 / jsx pre-compile /

React.js 설치

react 를 설치하고, 간단한 application 을 짜보자. react 설치 순서는 아래와 같다.

node js 설치(npm 설치)
bower 설치
bower 를 이용해 package 설치
react 설치

nodejs 설치

https://nodejs.org/en/

bower 설치

c:\> npm install bower

bower 사용 해서 package 설치

c:\> bower install jquery

react 설치

c:\> bower install --save react

간단한 시작 template

code from : Getting Started | React

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
    
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx" src="src/app/test.js">

    </script>
  </body>
</html>

src/app/test.js

React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

local 에서 test 하는 경우 크롬에선 제대로 실행안되니, 다른 브라우저를 이용하자.

jsx 를 미리 컴파일 하기

c:\> npm install react-tools

/src 의 내용을 compile 후에 build 에 넣어준다. --watch option 을 설정하면, file 이 변경될 때 알아서 compile 해준다.

c:\> node_modules/.bin/jsx.cmd --watch /src /build

당연한 이야기지만, 이렇게 만든 js 는 jsx compile 이 필요없으니, script 를 사용할 때도 JSXTransformer.js 가 필요없다. jsx 에 관한 간략한 내용은 see also. 1 을 참고하자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="bower_components/react/react.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/javascript" src="build/js-jsxcompiled/test.js">

      
    </script>
    
  </body>
</html>

참고로 react-tools 가 babel 로 옮겨졌다.(참고)

https://github.com/babel/grunt-babel#options

개인적인 React 에 대한 개략적인 개념

React 가 View 만 다루는 library 라는 점(framework 가 더 맞는 듯 하지만 일단 넘어가자.)은 여러곳에서 이야기 해서 알고 있을 듯 하다. 이걸 좀 더 code 적인 관점에서 이야기하면, React 는 html tag 를 만들어주는 녀석으로 이해하면 될 듯 하다. 물론 세부적인 사항은 더 있겠지만 그건 배제하자.

html tag 를 javascript code 를 통해 만들고, 이 녀석을 js code 로 쉽게 작업할 수 있게 해준다. 그래서 이 React 코드의 핵심은 React.createClass 이다. 이녀석을 통해 원하는 html code 를 하나의 component 단위로 잘라서 만들 수 있다. 이 덕에 동적인 작업을 하지 않더라도, 모듈화를 할 수 있어서 쓸모가 있다. 혹시 debugging 이 어렵지 않을까 걱정하지 않아도 된다. facebook 에서 개발자 툴을 제공한다. 여기를 참고하자.

그러니 이것만 기억하면 된다. 그리고 나서 이 html tag(view) 에 data 를 넘겨주는 등의 동적인 작업을 어떻게 하는지만 살펴보면 된다.

src/app/test2.js

CommentList = React.createClass({
 render : function(){
  return (
   <div className="commentList">
    <Comment author="Namh">This is one comment</Comment>
    <Comment author="Hun">This is *another* comment</Comment>
   </div>
  )}
});

React.render(`<CommentList />`, document.getElementById('content'))

쿠...sal

[컴][웹] 간단한 React 사용