React.js 튜토리얼 진행하기(2)

React.js 튜토리얼 실행하기 (1)의 후속.

서버에서 데이터 가져오기

루트 구성 요소에서 전달된 데이터의 획득 목표를 서버로 변경합니다.

ReactDOM.render(
- <CommentBox data={data} />,
+ <CommentBox url="/api/comments" />,
  document.getElementById('content')
);

이럴 때 가만히 있어.서버에서 데이터를 가져올 때 구성 요소를 업데이트해야 합니다.
구성 요소 읽기의 기본 형식은 <CommentBox />입니다.읽을 구성 요소에 데이터를 전달하려면 <CommentBox data={data} /> 처럼 쓰십시오.읽은 구성 요소에서 this.props.data 처럼 쓰면 이 데이터에 접근할 수 있습니다.
위의 코드에서 <CommentBox url="/api/comments" /> 이기 때문에 CommentBox 구성 요소에서 쓰기 this.props.url 하면 URL을 얻을 수 있습니다.

Reactive state

(1)에서는 props를 사용하여 모 어셈블리에서 서브어셈블리로 데이터를 전달하지만 props는 음소거이기 때문에 모 어셈블리에서 상속되는 값을 변경할 수 없습니다.부모와 아이가 서로 데이터를 교환할 수 있도록 props 대신 state를 사용한다.

var CommentBox = React.createClass({
+ getInitialState: function() {
+   return {data: []};
+ },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
-       <CommentList data={this.props.data} />
+       <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

CommentList로의 데이터 인수인계를 {this.props.data}에서 <CommentList data={this.state.data}로 변경한다.이렇게 하면 서버에서 데이터를 얻을 때 this.setState()를 사용하여 구성 요소CommentList를 업데이트할 수 있다.
또한 getInitialState() 구성 요소의 생명 주기에 첫 번째만 실행하고 초기 값을 설정할 수 있습니다.

state 업데이트

구성 요소 제작 시 서버에서 json 데이터를 가져와 최신 데이터로 업데이트해 보십시오.이번 json 데이터는 aax에서 진행됩니다.

var CommentBox = React.createClass({
+ loadCommentsFromServer: function() {
+   $.ajax({
+     url: this.props.url,
+     dataType: 'json',
+     cache: false,
+     success: function(data) {
+       this.setState({data: data});
+     }.bind(this),
+     error: function(xhr, status, err) {
+       console.error(this.props.url, status, err.toString());
+     }.bind(this)
+   });
+ },
  getInitialState: function() {
    return {data: []};
  },
+ componentDidMount: function() {
+   this.loadCommentsFromServer();
+   setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+ },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

ReactDOM.render(
- <CommentBox url="/api/comments" />,
+ <CommentBox url="/api/comments" pollInterval={2000} />,
  document.getElementById('content')
);

componentDidMount()는 어셈블리를 처음 렌더링할 때 수행되는 React 방법입니다.에서 전용 방법this.loadCommentsFromServer을 호출하여 서버에서 데이터를 얻습니다.
위 코드의 처리 절차는 대략 이렇다.
1. ReactDom.render()에서 프레임을 시작하고 CommentBox 구성 요소의 표현
2. getInitialState()에서 state의 값data을 설정한다.이것은 render 에 this.state.data 써서 방문할 수 있습니다.
3. aax를 통해 서버에서 데이터를 얻기 위해 componentDidMount()를 실행합니다.
4. 데이터를 얻었을 때this.setState({data: data}); 실행하고 state의 data 속성에 aax를 통해 얻은 데이터를 삽입하고 구성 요소를 다시 렌더링합니다.

실행

여기까지 쓰면 먼저 움직일 수 있을 것 같으니까 한번 움직여봐.
서버는 무엇이든 좋습니다.노드 서버를 시작했습니다.

$ node server.js
Server started: http://localhost:3000/

브라우저http://localhost:3000/방문하다.

업데이트/comments.json.

[
    {
        "id": 1388534400000,
        "author": "Pete Hunt",
        "text": "Hey there!"
    },
    {
        "id": 1420070400000,
        "author": "Paul O’Shannessy",
        "text": "React is *great*!"
    }
]

↓

[
    {
        "id": 1388534400000,
        "author": "Pete Hunt",
        "text": "Hey there!"
    },
    {
        "id": 1420070400000,
        "author": "Paul O’Shannessy",
        "text": "React is *great*!"
    },
    {
        "id": 9999999999999,
        "author": "ABCDEFG",
        "text": "あいうえお"
    }
]

실시간으로 업데이트되었습니다.
(2) 끝.받다