[React] 게시판 만들기 (4) - 삭제 기능 구현하기

저장된 데이터 옆에 X 버튼을 만들고, 이것을 누르면 데이터가 삭제되는 기능을 구현해보려 합니다

 

class App5 extends Component {
    ~~ 생략 ~~
    handleRemove = (brdno) => {
        this.setState({
            boards: this.state.boards.filter(row => row.brdno !== brdno)
        })
    }
    ~~ 생략 ~~
    
    render() {
        const { boards } = this.state;

        return (
            ~~ 생략 ~~
                    {
                        boards.map(row =>
                            (<BoardItem key={row.brdno} row={row} onRemove={this.handleRemove} onSelectRow={this.handleSelectRow} />)
                        )
                    }
            ~~ 생략 ~~
}

class BoardItem extends React.Component {
    handleRemove = () => {
        const { row, onRemove } = this.props;
        onRemove(row.brdno);
    }    
    ~~ 생략 ~~
    render() {
        console.log(this.props.row.brdno);
        return(
            <tr>
                <td>{this.props.row.brdno}</td>
                <td><a onClick={this.handleSelectRow}>{this.props.row.brdtitle}</a></td>
                <td>{this.props.row.brdwriter}</td>
                <td>{this.props.row.brddate.toLocaleDateString('ko-KR')}</td>
                <td><button onClick={this.handleRemove}>X</button></td>
            </tr>
        );
    }
}

 

 

(1) 먼저 각 데이터 끝에 X 버튼을 만들어 주고, handleRemove와 연결시켜 놓는디

 

(2) BoardItem 컴포넌트 안에 handleRemove를 만든다.

 

(3) App 컴포넌트의 <BoardItem /> 부분에 onRemove 라는 이름으로 handleRemove를 연결시켜 놓는다

 

(4) App 컴포넌트에 handleRemove를 만들고 filter 함수 활용하여 글을 삭제한다.

 

예를 들어 데이터가 세 개일때 row.brdno가 1 2 3 이고 지우려는 데이터의 brdno가 3이라면 row.brdno !==brdno인

1 2 만 남겨두고 3은 지우는 방식이다. (난 이렇게 이해했는데 맞는지 모르겠다ㅜㅜ)

 

 

데이터 삭제 기능의 경우 handleRemove라는 핸들러가 부모, 자식 컴포넌트에 둘 다 생겨서 이걸 이해하는 게 힘들었습니다 ㅠㅠ 지금도 50% 정도 밖에 이해하지 못한 것 같아서 자세한 설명을 적지 못했고 조금 더 공부하고 이해한 후에 보충하려 합니다!