react create구현

참고사이트

www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

React - YouTube

 

App.js추가 <Controller 추가

import Control from './components/Control';

...생략
return (
...생략

<Control onChangeMode={function(_mode){
          this.setState({
            mode:_mode
          })
        }.bind(this)}></Control>
);

 

Control.js (component추가)

create, update, delete 추가해서 호출에 따라서 mode값 변경

import React, { Component } from 'react';

class Control extends Component {
    render(){
      return (
        <ul>
          <li><a href="/create" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('create');
          }.bind(this)}>create</a></li>
          <li><a href="/update" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('update');
          }.bind(this)}>update</a></li>
          <li><input type="button" value="delete" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('delete');
          }.bind(this)}></input></li>
        </ul>
      );
    }
  }

export default Control;

 

-ReadArticle.js 추가 

create 클릭시 보여질 화면

import React, { Component } from 'react';

class ReadArticle extends Component {
    render(){
      return (
        <article>
            <h2>{this.props.title}</h2>
            {this.props.sub} <br/>
        </article>
      );
    }
  }

  export default ReadArticle;

 

- create 클릭시 변경되는 로직 추가 

mode에 따라서 _article 변경되게 수정

var _article 추가

_article = <ReadArticle title={_title} sub={_desc}></ReadArticle> 추가 

{_article} 추가 

import React, { Component } from 'react';
import Subject from "./components/Subject";
import Nav from "./components/Nav";
import ReadArticle from "./components/ReadArticle";
import CreateArticle from "./components/CreateArticle";
import './App.css';
import Control from './components/Control';

class App extends Component {
  //state 초기화
  //컴포넌트가 실행될때 constructor이 있다면 제일먼저 실행되어서 초기화를 담당한다.
  constructor(props){
    super(props);
    //subject state값을 만듬
    this.state = {
      mode: 'welcome',
      selected_content_id: 2,
      welcome: {title:'welcome', desc:'welcome react!'},
      subject:{title:'WEB', sub:'World Wide Web!'},
      contents:[
        {id:1, title:'HTML', desc: 'HTML is for information'},
        {id:2, title:'CSS', desc: 'CSS is for design'},
        {id:3, title:'JavaScript', desc: 'JavaScript is for interactive'},
      ]
    }
  }

  render(){
    var _title, _desc, _article = null;
    if (this.state.mode === 'welcome'){
      _title = this.state.welcome.title
      _desc = this.state.welcome.desc
      _article = <ReadArticle title={_title} sub={_desc}></ReadArticle>
    } else if (this.state.mode === 'read'){

      var i = 0;
      while(i < this.state.contents.length){
        var data = this.state.contents[i];
        if(this.state.selected_content_id === data.id){
          _title = data.title;
          _desc = data.desc;
          break;
        }
        i = i + 1;
      }
      _article = <ReadArticle title={_title} sub={_desc}></ReadArticle>
    } else if(this.state.mode === 'create'){
      _article = <CreateArticle title={_title} sub={_desc}></CreateArticle>
    }
    console.log('render', this);
    return (
      <div className="App">
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={
            function(){
              //alert('hihihi');
              this.setState({mode: 'welcome'});
            }.bind(this)}
        >
        </Subject>

        <Nav 
          onChangePage={
            function(id){
              //alert('abc');
              this.setState({
                mode: 'read',
                selected_content_id: Number(id)
              });
            }.bind(this)
          }
          data={this.state.contents}
        ></Nav>
        <Control onChangeMode={function(_mode){
          this.setState({
            mode:_mode
          })
        }.bind(this)}></Control>
        {_article}
      </div>
    );
  }
}

export default App;