삭제기능 추가

삭제에 대해 두 가지 방법이 존재합니다.

 

1. 삭제를 수행했을때 TABLE에서 제거하기

 

2. TABLE에서 삭제됬다고 체크만 하고 완전히 삭제하지는 않는 방법

 

2번째 방법을 사용하기.

 

ALTER TABLE CUSTOMER ADD createdDate DATETIME;
ALTER TABLE CUSTOMER ADD isDeleted INT;

로 컬럼추가

 

이제 CustomerDelelte component를 구현합니다.

 

import React from 'react';

class CustomerDelete extends React.Component{

    deleteCustomer(id){

        const url = `/api/customers/${id}`;

        fetch(url, {
            method : 'DELETE'
        })
        .then(() => {this.props.stateRefresh();})
        
    
    }
    

    render() {
        return(
            <button onClick={(e) => {this.deleteCustomer(this.props.id)}}>삭제</button>
        )
    }
}



export default CustomerDelete;

 

고객의 id값을 가져와 isDelelted값을 1로 변경해 줄 것인데요.

 

REST API는  약속을 지켜야 하므로 method를 delete로 요청하도록 합니다.

그런 다음 부모에게 전달받은 stateRefresh() 함수를 실행시켜줍니다.

 

클릭할 때마다 이벤트로 deleteCustomer 함수가 실행되도록 합니다.

 

다시 각 고객 정보를 렌더링 하는 Customer 컴포넌트에서 다음과 같이 자식 컴포넌트를 추가해줍니다.

 <TableCell><CustomerDelete stateRefresh={this.props.stateRefresh} id={this.props.id}/></TableCell>

이제 최상위 부모인 app.js에서 stateRefresh와 id값을 넘겨줍니다.

 {this.state.customers ? this.state.customers.map(c => {
             return ( <Customer stateRefresh={this.stateRefresh}  key = {c.id} id = {c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />);
             }) : 
             <TableRow>
             <TableCell colSpan="6" align="center">
               <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
             </TableCell>
           </TableRow> }

이제 클라이언트에서 요청 준비는 끝났으므로 server에서 받아줄 준비를 합니다.

 

app.delete('/api/customers/:id' ,(req, res) =>{

    let sql = "UPDATE CUSTOMER SET isDeleted = 1 where id = ?";
    let parmas = [req.params.id];

    con.query(sql, parmas,

        (err,rows,fields) => {

            res.send(rows);
        }
        
    )

});