본문 바로가기

그 땐 Front했지/그 땐 React했지

[생활코딩/React] 21.delete 구현

728x90

참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

1.  delete 구현


//App.js
<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.selected_content_id) {
            _contents.splice(i, 1);
            console.log('hi',_contents)
            break;
          }
          i = i + 1;
        }
        this.setState({
          mode: 'welcome',
          contents: _contents
        });
        alert('deleted!');
      }
    } else {
      this.setState({
        mode:_mode
      });
    }
  }.bind(this)}>
</Control>

👉🏻받아온 _mode값이 'delete'일 때 삭제하는 코드를 짜자

  • window.confirm을 통해 다시 한 번 더 확인을 한다. 만약 '확인'을 눌렀다면
  • contents state를 복제한 리스트를 돌리면서 현재 선택한 리스트(selected_content_id)와 id가 같다면 splice를 이용해 삭제한다.
  • mode state는 'welcome'으로 contents state는 아까 삭제한 리스트 _contents로 바꿔준다.

삭제 완료!

🐰length를 lentgh로 오타내서 10분동안 해맸다ㅜㅜ

728x90