자, 오늘은 드디어 마지막 Delete를 구현할 차례다.

시작해보자.

Delete 구현

이전의 예제를 가지고 계속 실습을 이어 나가자.
우리가 'CSS'링크를 클릭하면 this.state.selected_content_id의 값이 2가 되는 것을 알 수 있다. 그리고 이 상태에서 'delete'버튼을 클릭했을 때, 'CSS' 항목이 state.contents에서 삭제되도록 하고 싶다. 그렇다면 우선 'delete'버튼이 어디 있는지 부터 알아야겠지?

// Control.js 파일

<li><input onClick={function(e){
	e.preventDefault();
    this.props.onChangeMode('delete');
}.bind(this)} type="button" value="delete"></input></li>

Control.js파일에 input태그로 'delete'버튼을 작성한 것을 알 수 있다. 이 delete버튼은 onChangeMode함수를 호출하고, App 컴포넌트 내의 Control 컴포넌트의 onChangeMode에 지정한 함수가 호출된다. 그리고 이 함수에서 _mode값이 'delete'로 호출되면 항목이 삭제된다.
App.js파일을 수정해보자.

// App.js 파일

... 생략 ...

class App extends Component {
	... 생략 ...
    render() {
    	console.log('App render');
        return(
        	<div className="App">
            	... 생략 ...
                <Control onChangeMode={function(_mode){
                	if(_mode === 'delete') {
                    	if(window.confirm('really?')) {
                        	const _contents = Array.from(this.state.contents);
                            for(let i = 0; i < _contents.length; i++) {
                            	if(_contents[i].id === this.state.selected_content_id) {
                                	_contents.splice(i, 1);
                                    break;
                                }
                            }
                            this.setState({mode:'welcome', contents:_contents});
                            alert('deleted!');
                        } else {
                        	this.setState({mode:_mode});
                        }
                }.bind(this)}></Control>
        		... 생략 ...

'delete' 버튼을 누르면 onChangeMode에 지정된 함수의 인자인 _mode값이 'delete'인 상태로 호출된다. 그래서 _mode가 'delete'일때 삭제가 실행되고 _mode가 'delete'가 아니라면 페이지 전환을 하면 된다.

삭제가 시작됐을때 일단, 삭제할 것인지 물어보기 위해 window.confirm()을 호출했다. '확인'을 누르면 반환값이 true가 되고 '취소'를 누르면 false가 된다. 반환값을 통해 진짜로 삭제할지 확인한다.

그럼 어떤 항목을 삭제할 것인지 알 수 있을까? this.state.selected_content_id값과 this.state.contents의 id값이 일치하는 항목을 찾는다. 반복문을 돌려서 찾고, 배열의 불변성을 유지하기 위해 Array.from을 사용했다.
this.state.selected_content_id와 _contents[i].id가 일치하는 항목을 찾았으면 _contents에 해당 항목을 삭제한다. 삭제할 때는 splice함수를 사용하는데 splice함수는 인자로 어느항목부터 몇개를 지울 것인지 지정하면 된다.
_contents의 값이 변경되고 반복문을 빠져나가기 위해 break를 실행 한 다음, setState함수로 contents를 _contents로 설정해준다. 그리고 삭제가 잘됐다면 항목이 없어졌을 것이기 때문에 mode는 'welcome'으로 바꿔주었다.

자, 이제 'JavaScript'항목을 클릭하고 'delete'버튼을 눌러보자.

JavaScript 항목이 삭제되고 mode가 welcome이 되는 것을 알 수 있다.

Delete 구현까지 모두 끝났다,,..!
아직 익숙하지 않아서 계속 반복해보고 내것이 되도록 연습해야겠다🥹

출처: 생활코딩! 리액트 프로그래밍 책