Component로 CRUD 구현

1. 영역을 모드(read,create,delete) 따라 다른 컴포넌트로 구현

2. create모드 onSubmit 이벤트 발생시 CreateContent 컴포넌트를 추가하여 렌더링시킴.

3. 추가된 항목을 setState

기타 : debugger; 를 사용하여 객체의 값을 검사
console->e 엔터

import React, { Component } from 'react';
import Subject from './Components/Subject';
import Toc from './Components/Toc';
import Control from './Components/Control';
import ReadContent from './Components/ReadContent';
import CreateContent from './Components/CreateContent';

class App extends Component {
  constructor(props) {
    super(props);
    this.max_id = 3;
    this.state = {
      mode: 'read',
      selected_content_id: 2,
      subject: { title: 'WEB', sub: 'World Wide Web!' },
      welcome: { title: 'Welcome', desc: 'Helloooooooo ,React!!' },
      content: [
        { id: 1, title: 'HTML', desc: ' HTML is for information' },
        { id: 2, title: 'CSS', desc: 'CSS if for design' },
        { id: 3, title: 'Javascript', desc: 'JavaScript is for interactive' },
      ],
    };
  }
  render() {
    var _title,
      _desc,
      _article = null;// 1. <Content>영역을 모드(read,create,delete) 따라 다른 컴포넌트로 구현

    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 i = 0;

      while (i < this.state.content.length) {
        var data = this.state.content[i];
        if (data.id === this.state.selected_content_id) {
          _title = data.title;
          _desc = data.desc;
          break;
        }
        i = i + 1;
      }
      
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>;
    } else if (this.state.mode === 'create') {
      // create모드 onSubmit 이벤트 발생시 CreateContent 컴포넌트를 추가하여 렌더링시킴.
      _article = (
        <CreateContent
          onSubmit={function (_title, _desc) {
            var _maxid = this.max_id + 1;
            debugger; //console-> e 엔터
            var _contents = this.state.content.concat({ //원본을 복사하여 추가
              id: _maxid,
              title: _title,
              desc: _desc,
            });

            this.setState({ content: _contents });//추가된 항목을 setState
            alert(_title + _desc);
          }.bind(this)}
        ></CreateContent>
      );
    }

    return (
      <div>
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function () {
            this.setState({ mode: 'welcome' });
          }.bind(this)}
        ></Subject>
        <Toc
          onChagePage={function (id) {
            this.setState({
              mode: 'read',
              selected_content_id: Number(id),
            });
          }.bind(this)}
          data={this.state.content}
        ></Toc>
        <Control
          onChangeMode={function (_mode) {
            this.setState({
              mode: _mode,
            });
            console.log(_article);
          }.bind(this)}
        ></Control>

        {_article}
      </div>
    );
  }
}

export default App;