TODO App 1. View 만들기

Entry Point 작성

첫번째로 View-Controller를 만들어 보자.

View-Controller는 React를 이용할 것이다.

기본적으로 TODO APP을 만들때 2가지가 필요한데

• TODO List
• TODO 입력 Form

이렇게 2개의 Component로 나눠서 개발할 것이다.

우선 우리의 Entry Point인 /js/app.js에 아래와 같은 코드를 작성한다.

var React = require('react');
var Comments = require('./views/comments');
var CommentForm = require('./views/comment-form');

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Comments />
        <CommentForm />
      </div>
    );
  }
});

React.render(<App />, document.getElementById('app'));

첫줄은 React를 가져오고

var Comments = require('./views/comments');
var CommentForm = require('./views/comment-form');

Comments이 위에서 말한 TODO List이고

CommentForm이 TODO LIST의 입력 폼이다.

CommentForm 작성

이제 CommentForm을 구현해보자.

var React = require('react');

var CommentActionCreators = require('../actions/comment-action-creators');

var CommentForm = React.createClass({

  onSubmit: function(e) {
    var textNode = this.refs.text.getDOMNode();
    var text = textNode.value;

    textNode.value = '';

    CommentActionCreators.createComment({
      text: text
    });
  },

  render: function() {
    return (
      <div className='comment-form'>
        <textarea ref='text' />
        <button onClick={this.onSubmit}>Submit</button>
      </div>
    );
  }
});

module.exports = CommentForm;

위와 같은 코드가 나오는데

천천히 설명해보겠다.

var CommentActionCreators = require('../actions/comment-action-creators');

우리가 사용할 Comment에 대한 Action 객체를 가져온다.

그리고 React로 우리가 사용할 CommentForm을 구현하는데

onSubmit: function(e) {
    var textNode = this.refs.text.getDOMNode();
    var text = textNode.value;

    textNode.value = '';

    CommentActionCreators.createComment({
      text: text
    });
  }

onSubmit 메서드는 TODO를 등록할때 호출되는 메서드인데

input에서 등록할 TODO의 text를 가져온 다음

CommentActionCreators.createComment({
      text: text
    });

ActionCreator에 text를 던져준다.

그럼 ActionCreator는 던져준 text를 가진 Action을 생성하고 Dispatcher는 해당 Action을 받아서 등록된 Store의 Callback으로 던져준다.

이렇게 CommentForm의 작성은 끝난다.

Comment는 Store까지 만든 이후에 만들어 보도록 하자.