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
'그 땐 Front했지 > 그 땐 React했지' 카테고리의 다른 글
[생활코딩/React] 2022개정판 | 3.소스코드 수정방법 (0) | 2022.05.01 |
---|---|
[생활코딩/React] 2022개정판 | 2.실습환경 구축 (0) | 2022.05.01 |
[생활코딩/React] 20.update 구현 (0) | 2022.04.24 |
[생활코딩/React] 19.create 구현 (0) | 2022.04.23 |
[생활코딩/React] 17. 컴포넌트 이벤트 (0) | 2022.04.23 |