[ React ] CRUD - Delete 구현

deleteContent 함수 생성

 

App.js

deleteContent(_id) {
    let _content = null;
    let _contents = Array.from(this.state.contents);
    for (let i = 0; i < _contents.length; i++) {
      if (_contents[i].id === _id) {
        _contents.splice(i, 1)
      }
    }
    this.setState({
      contents: _contents,
      mode: 'read',
      selected_content_id: 0,
    })
  }

delete에서도 마찬가지로 기본 array에는 영향이 없도록 Array.from()을 사용하고 있습니다. 

 

그리고 splice 함수를 사용하는데, splice는 JS 문법으로, 첫번째 인수로는 index 위치를 받고 두번째 인수로는 삭제할 개수를 인수로 받습니다. 

splice는 원본데이터 자체를 변경합니다. 하지만 Array.from()으로 만든 복제 데이터를 변경하기 때문에 상관없습니다. 

 

그리고 setState에는 삭제한 contetns를 새로 적용하고, mode는 read로 selected_content_id는 0으로 초기화합니다. 

 

if (_mode === 'read') {
  _article = <ReadContent title={_title} desc={_desc}/>
} else if (_mode === 'create') {
  _article = <CreateContent saveContent={this.saveContent} />
} else if (_mode === 'update') {
  _article = <UpdateContent 
    updateContent={this.updateContent}
    id={this.state.selected_content_id}
    title={_title}
    desc={_desc}
   />
} else if (_mode === 'delete') {
  this.deleteContent(this.state.selected_content_id);
}

mode가 delete일 때, 위해서 생성한 함수를 실행하도록 인수는 현재 선택된 id로 보냅니다.

 

JS를 선택하고 delete 버튼을 누르면,

 

 

 

 

 

 

 

 

 

 

 

 

 

사진처럼 JS가 리스트에서 사라진 것을 볼 수 있습니다.