[TIL] React 초급: CRUD - Delete 구현하기

12. Delete 구현

• App.js에 있는 Control컴포넌트 부분에서 delete기능을 수행하도록 구현할 수 있다.

• delete모드일 때와 아닐 때 구분 짓는 코드로 수정하기

  <Control onChangeMode={function(_mode) {
          if(_mode === 'delete') {
              
          } else {
              this.setState({
                  mode: _mode
              });
          }
      }.bind(this)}></Control>

• delete모드에서 confirm창을 띄우고 사용자가 확인을 누르면 삭제하고, 취소를 누르면 삭제하지 않도록 하는 코드 작성하기

  <Control onChangeMode={function(_mode) {
          if(_mode === 'delete') {
              // confirm은 앞에 window를 붙여줘야 실행된다
              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) {
                          // splice()로 어디에서 어디까지 지울 것인지 결정
                      	_contents.splice(i,1);
                      	break;
                      }
                    	i = i + 1;
                  }
                  this.setState({
                    mode: 'welcome',
                    contents: _contents
                  });
                  alert('Deleted!');
              }
          } else {
              this.setState({
                  mode: _mode
              });
          }
      }.bind(this)}></Control>

  💡 splice(): 배열을 변경할 때 사용하는 함수. ()안에 들어가는 인자는 순서대로 1. 변경을 시작할 인덱스, 2. 제거할 요소의 개수, 3. 배열에 추가할 요소 3가지이다. 리턴값은 제거한 요소를 담은 배열이다.