[React] Update 구현

목표: Create 컨텐츠에 내용을 작성하고 Submit 버튼을 누르면, 어떤 이벤트가 발생해서 App 컴포넌트의 contents 항목 배열 끝에 작성한 내용이 추가된다.

 

//App.js
import React, {Component} from 'react';
import TOC from "./components/TOC";
import ReadContent from "./components/ReadContent";
import CreateContent from "./components/CreateContent";
import UpdateContent from "./components/UpdateContent";
import Subject from "./components/Subject";
import Control from "./components/Control";
import './App.css';

class App extends Component{
  constructor(props){
    super(props);
    this.max_content_id = 3;  
    this.state = {
      mode:'read',
      selected_content_id: 1,
      subject:{title:'WEB', sub:"World Wide Web!"},
      welcome:{title:"Welcome", desc:"Hello, React!"},
      contents:[
        {id:1, title:'HTML', desc:"HTML is for information"},
        {id:2, title:'CSS', desc:"CSS is for design"},
        {id:3, title:'JS', desc:"JS is for interfactive"}
      ]
    }
  }

  getReadContent(){
    var i = 0;
    while (i < this.state.contents.length){
      var data = this.state.contents[i];
      if (data.id === this.state.selected_content_id){
        return data;
        break;
      }
      i += 1;
    }
  }

  getContent(){ //getContent 함수로 분리
    var _title, _desc, _article = null;
    if(this.state.mode === "welcome"){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>
    }
    else if(this.state.mode === "read"){
      var _content = this.getReadContent();
      _article = <ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    }
    else if(this.state.mode === "create"){
      _article = <CreateContent onSubmit={function(_title, _desc){
        this.max_content_id += 1;
        var _contents = Array.from(this.state.contents);  //원본을 바꾸지 않기 위함
        _contents.push({id: this.max_content_id, title: _title, desc: _desc});
        this.setState({
          contents: _contents,
          mode: 'read',
          selected_content_id: this.max_content_id
        });
        
      }.bind(this)}></CreateContent>
    }
    else if(this.state.mode === "update"){
      _content = this.getReadContent();
      _article = <UpdateContent data={_content} onSubmit={
        function(_id, _title, _desc){
          var _contents = Array.from(this.state.contents);  //원본을 바꾸지 않기 위함
          var i = 0;
          while (i < _contents.length){
            if (_contents[i].id === _id){
              _contents[i] = {id: _id, title: _title, desc: _desc};
              break;
            }
            i += 1;
          }
          this.setState({
            contents: _contents,
            mode: 'read'
          });
        
      }.bind(this)}></UpdateContent>
    }
    return _article;
  }

  render(){
    return(
      <div className="App">
      <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function(){
            this.setState({mode:"welcome"});
          }.bind(this)}
      >
      </Subject>
      <TOC 
        onChangePage={function(id){
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
        }.bind(this)}
        data={this.state.contents}
      ></TOC>
      <Control onChangeMode={function(_mode){
        this.setState({
          mode: _mode
        });
      }.bind(this)}></Control>
      {this.getContent()}
      </div>
    );
  }
}
export default App;

//UpdateContent.js
import React, {Component} from 'react';
class UpdateContent extends Component{
    constructor(props){
      super(props);
      this.state={
        id: this.props.data.id,
        title: this.props.data.title,
        desc: this.props.data.desc
      }
      this.inputFormHandler = this.inputFormHandler.bind(this);
    }
    inputFormHandler(e){
      this.setState({[e.target.name]: e.target.value});
    }
    render(){
      return(
      <article>
        <h2>Update</h2>
        <form action="/update_process" method="post" onSubmit={function(e){
          e.preventDefault();
          this.props.onSubmit(
            this.state.id,
            this.state.title,
            this.state.desc);
        }.bind(this)
        }>
          <input type="hidden" name="id" value={this.state.id}></input>
          <p>
            <input
              type="text"
              name="title"
              placeholder="title"
              value={this.state.title}
              onChange={this.inputFormHandler}
            ></input>
          </p>
          <p>
            <textarea
              name="desc"
              placeholder="description"
              value={this.state.desc}
              onChange={this.inputFormHandler}
            ></textarea></p>
          <p><input type="submit"></input></p>
        </form>
      </article>
      );
    }
  }

  export default UpdateContent;