Delect : C/R/U/Delete

이제 CRUD의 기능에서 D : Delete를 구현해보자.

<App> 컴포넌트의

• state . mode : create 를
• state . mode : welcome 으로 바꿔놓자

delete 버튼은 <Control> 안에 <input> 태그에 있고,
delete 버튼은 onChangeMode 라는 props 를 호출한다.

우리는 _mode 라는 값이 delete 로 호출된다면 삭제가 시작된 것을 알 수 있다.

_mode 의 값이 delete 일 경우 삭제가 시작되고 그렇지 않을경우 페이지 전환을 해주도록 하자.

• App.js > Control 영역

<Control onChangeMode={function(_mode){
  if(_mode === 'delete'){
    if(window.confirm('ㄹㅇ??')){
      var _contents = Array.from(this.state.contents);
      var i = 0;
      while(i < _contents.lenght){
        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>

위 코드를 살펴보면 삭제를 하라는 이벤트 발생시 정말 삭제를 할 건지 한번 더 물어보도록 window.confirm() 을 사용한다.

window.confirm() 알림이 발생했을 때, 사용자가 확인 혹은 취소를 누를 경우

• 확인 : True
• 취소 : False

window.confirm() 의 반환값이 True일 경우 삭제 절차가 진행되도록 작성했다.

삭제를 할 때 누구를 삭제할 것인가는 selected_content_id 를 통해 알 수 있다.

지울 데이터의 범위를 설정하기 위해 반복문으로 while(i < _contents.length) 사용한다.

contents 배열에서 지울 때는 splice() 를 사용한다.

splice() 는 어디에서 어디까지 지울 것인가를 지정한다.
위 코드는 발견한 원소의 id 값부터 한개를 지우도록 작성되있다.

• splice(i,n)

i : 인덱스(선택된 배열 위치)
n : 인덱스 부터 지울 배열 갯수

그 결과 _contnets 의 값이 우리가 원하는 대러 바뀔 것이고,

값이 바뀌면 반복할 필요가 없으니 break 로 반복문을 빠져나오게 된다.

그리고 삭제가 완료되었으면 mode 를 welcome 으로 바꿔준다.

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

웹 페이지로 가서 글 목록을 선택하고 delete 버튼을 누르면 삭제가 되고,
welcome 페이지로 이동하고 state 값도 수정된 것을 확인할 수 있다.

alert('deleted!!');

삭제가 되면 alert() 을 통해 삭제가 끝났다고 알려준다.