React(19) Delete 구현

대망의 React 마지막 포스팅!!! (동영상강의 : 생활코딩 opentutorials.org/module/4058)

 

최종목표 

JavaScript를 클릭하고 delete 누르면 컨펌 메시지가 뜬다.

컨펌 메시지의 확인을 누르면 deleted 되었다는 메시지가 나온다

글목록에 JavaScript가 사라지고 웰컴모드가 됨 

 

delete의 구현은 CRUD중 가장 쉽다. CRU했던 부분에 숫가락 얹기(?)

하지만 데이터가 삭제되는 것인만큼 삭제전 사용자의 confirm을 꼭 받는게 아주 중요하다.

Control.js

사용자가 delete를 누르면 <Control>태그 안에 onChangeMode()라는 Props를 호출함. 이때 인자로 delete를 받음.

App.js로 넘어가자

**전체코드보기(복사용 첨부 / 더보기클릭)

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 onClick={function(e){

                e.preventDefault();

                this.props.onChangeMode('delete');

              }.bind(this)} type="button" value="delete"/>

            </li>

        </ul>

    );

  }

}

export default Control;

---

 

App.js

if 여기서 인자로 받은 (_mode가 === delete) 일 때, 실행될 onChangeMode()의 로직이 나온다.

   if 그 전에 window.confirm() 으로 사용자확인을 한번 더 받고 가야한다. (확인선택시 아랫줄 / 취소선택시 else로 이동)

   - _contents Array.from으로 복제본 배열 만들어놓고,

   - while 문으로 배열 원소들 한바퀴 돌리고, 

      - 현재 보는 글 id == selected_content_id 와 같으면

      - splice(i, 1) 사용해서 어디서 어디까지 지울건지 명시. id 인덱스인 i 부터 1개 (그 본인)만 지우기

      - 목적을 이뤘으면 break로 마무리

   - this.setState로 삭제 후 state처리작업 해주기 (웰컴모드로 변경하고, 업데이트된 배열로 교체)

   - alert 문 사용해 삭제컨펌까지 하면 삭제완료!

  else 

   - 삭제하려다 취소선택시 원래 모드로 돌아감

 

**전체코드보기(복사용 첨부 / 더보기클릭)

import React, { Component } from 'react';

import Subject from "./components/Subject.js";

import Main from "./components/Main.js";

import Control from "./components/Control.js";

import CreateContent from "./components/CreateContent.js";

import UpdateContent from "./components/UpdateContent.js";

import ReadContent from "./components/ReadContent.js";

import './App.css';

 

class App extends Component {

  constructor(props){

    super(props);

    this.max_content_id = 3;

    this.state = {   

      mode:'welcome', 

      selected_content_id:1, 

      head:{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(){

    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;

    }

  }

  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

        });

        console.log(_title, _desc);

      }.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 = i+1;

          }

          this.setState({

            contents:_contents,

            mode:'read'

          });

          console.log(_title, _desc);

        }.bind(this)}></UpdateContent>

    } 

    return _article;

  }

  render() {

    console.log('App render'); 

    return(

      <div className="App">

        <Subject 

          title={this.state.head.title} 

          sub={this.state.head.sub}

          onChangePage={function(){

            this.setState({mode:'welcome'});

          }.bind(this)}>

        </Subject>        

        <Main 

          onChangePage={function(id){

            this.setState({

              mode:'read',

              selected_content_id:Number(id)

            });

          }.bind(this)}

          data={this.state.contents}>

        </Main>

        <Control onChangeMode={function(_mode){

          if(_mode === 'delete'){

            if(window.confirm('really?')){

              var _contents = Array.from(this.state.contents);

              var i = 0;

              while(i < this.state.contents.length){

                if(_contents[i].id === this.state.selected_content_id){

                  _contents.splice(i, 1);

                  break;

                }

                i = i + 1;

              }

              this.setState({

                mode:'welcome',

                contents:_contents

              });

              alert('deleted!');

            }

          } else{

            this.setState({

              mode:_mode

            })

          }

          

        }.bind(this)}></Control>

        {this.getContent()}

      </div>

    );

  }

}

export default App;

---