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

node.js 설치 / jsx pre-compile /



React.js 설치

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

  1. node js 설치(npm 설치)
  2. bower 설치
  3. bower 를 이용해 package 설치
  4. 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'))





See Also

  1. 그것이 알고 싶다 – Spinbox로 React 겉핥기 | WIT - We are UIT
  2. https://github.com/i5on9i/reactjstemplate




댓글 2개:

  1. React의 핵심은 JavaScript 영역에서 HTML을 직접 제어할 수 있다는 점이죠. 일반적으로 JS 프레임워크에서 뷰를 붙이려면 HTML과 JS가 따로있거나 미리 만들어진 JS 컴포넌트들이 HTML을 생성하고 제어하는 형식인데, 물론 리엑트도 동일하지만 JSX를 사용했을 경우 JS에 바로 HTML을 작성할 수 있다는 엄청난 강점이 있고(적어도 눈에 보이기에는) 전통적인 웹애플리케이션은 JS/CSS/HTML을 최대한 분리하지만 리엑트는 이를 아주 효과적으로 통합할 수 있는 솔루션을 제공해주기도 하죠. 문법 자체도 간결하고 View만을 지원하기 때문에 정말 여러 라이브러리나 프레임워크에 어렵지않게 접목할 수 있다는 점도 한몫한다고 생각합니다.

    답글삭제
    답글
    1. 네, 동감합니다. 저도 간결함때문에 react 를 사용합니다.^^

      삭제