생활코딩 React 강의 (10) - delete 구현

Delete기능을 위해 필요한 것

1. 원하는 자료를 삭제하는 기능

삭제된 후에는 state의 contents와 TOC에서 사라진 모습을 확인할 수 있다.

 

삭제 버튼은 ControlComponent안에 있다. ControlComponent에서 delete버튼을 눌렀을 때 삭제 기능을 하도록 만들어야 한다.

<Control onChangeMode={function(_mode){
  if(_mode === 'delete'){
    if(window.confirm("really?")){
      var _contents = Array.from(this.state.contents)
      var i = 0;
      while(i < _contents.length){
        if(_contents[i].id === this.state.content_id){
          _contents.splice(i, 1);
          break;
        }
        i = i + 1;
      }
      this.setState({
        mode:"welcome",
        contents: _contents
      })
      alert('deleted!');
    }
  } else {
    // delete가 아닌 경우 선택된 기능을 구현하는
    // Component에서 작업을 수행하도록 한다.
    this.setState({
      mode: _mode
    })
  }
}.bind(this)}></Control>

window.confirm()은 괄호 안에 메시지를 포함한 확인창을 띄우며 확인을 누르면 True, 취소를 누르면 False를 반환한다.

전달받은 _mode가 'delete'일 경우, 확인창을 띄워서 삭제하기 전 다시 한 번 확인하도록 한다.

 

확인을 누르면 contents내에서 content_id와 id가 같은 자료를 삭제한다.

*삭제 버튼은 삭제할 자료를 선택한 후 delete버튼을 누른다. 버튼을 누르기 전에 선택된 자료의 id가 content_id에 들어가 있으므로 content_id를 통해 찾을 수 있다.

 

Array.splice(start, deleteCount)

start부터 deleteCount 개수만큼 요소를 삭제해 배열의 내용을 변경한다.

(참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

원본이 수정되므로 Array.from(this.state.contents)를 통해 만든 _contents라는 사본을 만든다.

_contents.splice(i, 1)이므로 _contents에서 i번째부터 한 개의 요소를(i번째 요소만) 삭제한다.

this.setState를 통해 새로운 배열을 contents에 넣고, mode를 'welcome'으로 바꿔 초기 화면으로 바꿔준다.

 

* delete를 통해 contents의 개수가 줄었지만 this.max_content_id 를 수정하지 않는 이유

새로운 자료를 입력할 땐 this.max_content_id를 하나씩 증가시키는데 삭제할 땐 수정하지 않는다.

삭제할 때 마다 this.max_content_id = this.max_content_id - 1; 로 contents의 자료 개수에 맞춰 수정해준다면 어떻게 될까?

 

처음 자료는

HTML {id: 1}

CSS {id: 2}

Javascript {id: 3}

이었는데 CSS를 삭제하고 새로운 react를 create를 통해 만들어주었다. 그랬더니 콘솔창에 경고메시지가 떴다.

같은 id를 가진 자료가 만들어졌기 때문이다.

create에서 새로운 자료를 입력할 때 id는 this.max_contents_id값을 사용한다.

// CreateComponent
this.max_content_id = this.max_content_id + 1;
var _contents = this.state.contents.concat(
    { id:this.max_content_id , title:_title, desc:_desc }
)

맨 마지막 자료를 삭제한 경우는 상관없지만 중간에 있는 자료를 삭제했을 경우, 같은 id를 가진 자료가 만들어지기 때문에 자료의 수와 상관없이 계속 새로운 id를 만들 수 있도록 max_content_id는 수정하지 않는다.

 

참고한 사이트

생활코딩 React 강의

21 delete 구현

https://youtu.be/QxQvKM6hzDk

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN