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가지이다. 리턴값은 제거한 요소를 담은 배열이다.