ReactJs - Update , Delete기능 구현하기

 

 

 

Update , Delete기능 구현하기

 

 

 

 

1. Update 구현

 

App.js

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

class App extends Component {
  constructor(props){
    super(props);
    this.max_content_id = 3;
    this.state = {
      mode:'create',
      
      selected_content_id:2,
      subject:{title:'WEB event TEST', sub:'this is test start'},
      TEST1:{title:'TEST1', desc:'this is test1'},
      contents:[
        {id:1, title:'TEST2-1', desc:'HTML is for information'},
        {id:2, title:'TEST2-2', desc:'CSS is for design'},
        {id:3, title:'TEST2-3', desc:'JavaScript is for interactive'}
      ]
    }
  }
    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 = i + 1;
      }
    }
    //state의 객체들을 조건되로 뽑아오는 코드들을 묶어 함수화 시켰다.
    getContent(){
    
    var _title, _desc, _article = null;
    if(this.state.mode ===  'TEST1'){
      _title = this.state.TEST1.title;
      _desc = this.state.TEST1.desc;
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>    
    } else if(this.state.mode === 'read'){
      var _content =this.getReadContent(); //state의 Contents 객체 변수화
    _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;
            var _contents = Array.from(this.state.contents); //생성한 contents 변수 받음
            _contents.push({id:this.max_content_id, title:_title, desc:_desc});
            this.setState({
                contents: _contents, 
                //생성한 contents 변수 받은 _contents변수로 state의 contents 변경
                
                  mode:'read', 
                //변경 후 모드를 read로 바꾸어 변경된  state의 contents 읽어옴.
                
                selected_content_id:this.max_content_id
                //create에서 새롭게 생성된 id값을 state의 selected_content_id에 삽입
            });
        }.bind(this)}></CreateContent>
    }
      else if(this.state.mode === 'update'){
          _content =this.getReadContent(); //state의 Contents 객체 변수화
        _article = <UpdateContent data={_content} onSubmit={function(_id, _title, _desc){
            var _contents = Array.from(this.state.contents); //생성한 contents 변수 받음
            var i = 0;
            while(i < _contents.length){
                if(_contents[i].id === _id){
                    _contents[i] = {id:_id, title:_title, desc:_desc};
                    break;
                }
                i =i+1;
            }
            this.setState({
                contents: _contents,
                //생성한 contents 변수 받은 _contents변수로 state의 contents 변경
                
                 mode:'read'
                 //변경 후 모드를 read로 바꾸어 변경된  state의 contents 읽어옴.
            });
        }.bind(this)}></UpdateContent>
      }  
        return _article; 
        //완성된 article 변수 리턴
    }
    
  render() {
    console.log('App render');
    
    return (
      <div className="App">
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){
            this.setState({mode:'TEST1'});
          }.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);
        //상위 컴포넌트의 state값을 props으로 가져와 이 하위 컴포넌트에서 다시 이 가져온 state 값을 
        //state 값으로 객체화한다.
        this.state = {
        id:this.props.data.id,
        title:this.props.data.title,
        desc:this.props.data.desc
        }
        this.inputFormHandler = this.inputFormHandler.bind(this); 
                         //.bind(this)을 안쓰도록 변수화
    }
    inputFormHandler(e){
        this.setState({[e.target.name]:e.target.value}); 
                      //[e.target.name]은 리액트의 기능이다.
    }
  render(){
    return (
      <article>
          <h2>Update</h2>
          <form action="/create_process" method="post" 
           onSubmit={function(e){
          e.preventDefault();
        alert('test');
        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 
             onChange={this.inputFormHandler}
             name="desc"  
             placeholder="description" 
             value={this.state.desc}></textarea>  
        </p>
        <p><input type="submit"></input>  
        </p>
        
        </form>
      </article>
    );
  }
}
export default UpdateContent;

업데이트가 가능해졌다.

 

 

 

 

 

 

3. Delete 구현하기

 

 

App.js

 

render() {
    console.log('App render');
    
    return (
      <div className="App">
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){
            this.setState({mode:'TEST1'});
          }.bind(this)}
        >
        </Subject>

        <TOC 
         onChangePage={function(id){
            this.setState({
              mode:'read',
              selected_content_id:Number(id)
            });
          }.bind(this)} 
          data={this.state.contents}
        ></TOC>
        
        //control 태그의 delete을 구현하기 위한 코드를 작성하였따.
        <Control onChangeMode={function(_mode){
            if(_mode === 'delete'){
                if(window.confirm()){ //confirm을 이용하여 정말 삭제할 건지 경고창을 띄우게한다.
                    var _contents = Array.from(this.state.contents);
                    var i =0;
                    while(i<_contents.length){
                        if(_contents[i].id === this.state.selected_content_id){
                            _contents.splice(i,1); 
                            //splice()메소드는 첫번째 인자로 삭제할 시작지점을 정하고
                            //두번째 인자로는 시작하여 몇개까지 지울지 정할 수 있다.
                            //즉 state의 contents의 배열화한 데이터를 받은 splice 메소드는
                            //반복문에 의하여 첫번째 값부터 끝까지 차례대로 반복해서 지운다. 
                            break;
                        }
                        
                        i = i+1;
                    }
                    //삭제한 동시에 모드는 처음 상태인 TEST1을 돌아가게 하였고
                    //삭제 후에 변동된 state의 contents값으로 바뀌게 하였다.
                    this.setState({
                        mode: 'TEST1',
                        contents: _contents
                    });
                }
            }else //delete
                  this.setState({
                      mode:_mode
                  });
                 }.bind(this)}></Control>

        {this.getContent()}
      </div>
    );
  }
}

delecte을 클릭하자 TEST-3가 삭제되어버리고 초기화면으로 돌아가는 것을 확인 할 수 있다.