[React] (12) Delete 기능 구현 (CRUD) - CRUD 구현된 github

  이제 CRUD의 마지막 기능인 Delete 기능이 남았다. 우리는 이미 Control.js에 delete버튼을 만들어 놓았다.

Control.js

import React, { Component } from 'react';

class Control extends Component {
  render() {
    console.log('Control 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 onClick={function(e) {
          e.preventDefault();
          this.props.onChangeMode('delete');
        }.bind(this)} type="button" value="delete"></input></li>
      </ul>
    );
  }
}

export default Control;

 

 

  그리고 App.js에서 Control 태그 부분을 이렇게 고치면 된다.

<Control onChangeMode={function(_mode) {
        if(_mode === 'delete') {
          if(window.confirm('really?')) {
            let _contents = Array.from(this.state.contents);
            for(let i = 0; i < _contents.length; i++) {
              if(_contents[i].id === this.state.selected_content_id) {
                _contents.splice(i, 1);
                break;
              }
            }
            this.setState({
              mode: 'welcome',
              contents: _contents
            })
          }
        } else {
          this.setState({
            mode: _mode
          });
          alert('deleted')
        };
      }.bind(this)}></Control>

 

 

전체 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 {
// render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다가 짜라
// 부모
  constructor(props) {
    super(props);
    this.max_content_id = 3;
    // 초기화 끝내고 state를 초기화 시킨다.
    this.state = {
      mode: "welcome",
      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: 'JAVASCRIPT', desc: 'JAVASCRIPT is for interactive'}
      ]
    }
  }
  getReadContent() {
    for(let i = 0; i < this.state.contents.length; i++) {
      let data = this.state.contents[i];
      if(data.id === this.state.selected_content_id) {
        return data;
        break;
      }
    }
  }
  getContent() {
    console.log('App render')
    let _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") {
      let _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 = this.max_content_id + 1;
        let _contents = this.state.contents.concat(
          { id: this.max_content_id, title: _title ,desc: _desc}
        )
        this.setState({
          contents: _contents
        })
        console.log(_title, _desc)
      }.bind(this)}></CreateContent>
    } else if(this.state.mode === "update") {
      let _content = this.getReadContent();
      _article = <UpdateContent data={_content} onSubmit={function(_id, _title, _desc) {
        let _contents = Array.from(this.state.contents);
        for(let i = 0; i < _contents.length; i++) {
          if(_contents[i].id === _id) {
            _contents[i] = {id:_id, title:_title, desc:_desc};
            break;
          }
        }
        this.setState({
          contents: _contents
        });
        console.log(_title, _desc);
      }.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) {
        if(_mode === 'delete') {
          if(window.confirm('really?')) {
            let _contents = Array.from(this.state.contents);
            for(let i = 0; i < _contents.length; i++) {
              if(_contents[i].id === this.state.selected_content_id) {
                _contents.splice(i, 1);
                break;
              }
            }
            this.setState({
              mode: 'welcome',
              contents: _contents
            })
          }
        } else {
          this.setState({
            mode: _mode
          });
          alert('deleted')
        };
      }.bind(this)}></Control>
      {this.getContent()}
    </div>
    );
  }
}

export default App;

 

 

---

 

github.com/ukcasso/react_CRUD

ukcasso/react_CRUD

여기서 파일을 받으시고 npm install로 module을 다운받으신 후에 실제로 실행시켜보실 수 있습니다.