react와 express 서버 연동 익히기 9편 -DB 데이터 삭제하기-

1. App.js 수정

 

front의 App.js에 데이터를 삭제하는 deleteData 함수 작성

 

  async function deleteData(el) {
    const remove = window.confirm(el.name + '을 삭제합니까?');

    if (remove) {
      const body = {id:el.id}

      const res = await axios('/delete/data',{
        method : 'POST',
        data: {'delete':body},
        headers: new Headers()
      })

      if (res.data) {
        alert('데이터를 삭제했습니다.')
        return window.location.reload();
      }
    }
  }

 

 

삭제 버튼도 추가해서, 누르면 삭제할 수 있도록

 

  return (
      <div className='App'>
        <h3> welcome to <u> daehyuck </u> blog! </h3>
        <h5> 대혁이다 </h5>

        <br />

        <form method= 'POST' onSubmit={(e) => addData(e)}>
          <input type="text" maxLength='10' onChange={(e) => nameUpdate(e)}/>
          <input type="submit" value="Add"/>
        </form>

        <br /> <br />
        <div style={{ height: '250px', overflow: 'auto' }}>
          <h4 style={{ color: '#ababab'}}> Teachers List </h4>

          <div style={{ border: 'solid 1px black', width : '50%', marginLeft : '25%', textAlign : 'left'}}>
            <div style={{ display : 'grid', gridTemplateColumns : '32% 35% 30%', textAlign : 'center' }}>
            <div> Number </div>
            <div> Name </div>
            <div> Other </div>
            </div>
          </div>

          {list.length !== 0 ? list.map( (el,key) => {
            return(
              <div key={key} style={{ display : 'grid', lineHeight: '40px', gridTemplateColumns : '32% 35% 20% 0%', width: '50%', marginLeft:'25%'}}>
                <div> {el.id} </div>
                <div> {el.name} </div>
                {/* 추가 */}
                <div
                style={{color:'#ff3399'}}
                onClick={() => modifyData(el)}> Modify </div>
                {/* 추가 */}
                <div
                style = {{ color: '#f5a0a0'}}
                onClick={() => deleteData(el)}>Delete </div>
                {/* 추가 */}
                </div>
            )
          })
        : null}
        </div>
      </div>
    )

 

 

실행시켜보면 다음과 같다

 

 

2. 삭제하는 api 추가

 

server.js에 삭제를 위한 api를 추가

 

//데이터 삭제

app.post('/delete/data', (req,res) => {
    Teacher.destroy({
        where : { id: req.body.delete.id }
    })
    .then( res.sendStatus(200) )
    .catch( err => { throw err })
})

 

여기서 쓰인 destroy 메소드는 sequelize를 이용해 데이터를 삭제하는 메소드

 

destroy 메소드는 어떤 대상을 삭제할 것인지, where로 받는다.

 

해당 컬럼의 이름을 key값으로 받고, 그 컬럼안의 데이터를 value로 받아서, 해당 데이터를 select한 다음 삭제

 

 

 

만약 Teacher 테이블에서 name의 '수지'를 삭제하고 싶다면...

 

app.post('/delete/data', (req,res) => {
    Teacher.destroy({
        where : { name: '수지' }
    })
    .then(res.sendStatus(200))
    .catch(err => {throw err})
})

 

이러면 컬럼 name 값이 수지라는 행이 삭제될 것이다

 

2번 행의 delete를 눌러보자.

 

 

const remove = window.confirm(~)에 의해 창이 뜨면서 삭제할지 확인을 하고 있음

 

그러면 삭제했다고 나오고...

 

 

실제로 조회하면 데이터가 삭제되어 있다

 

그리고 sql workbench에서도 확인해보면... 지정한 데이터가 삭제되어있다.

 

 

 

3. 모든 테이블 초기화

 

다음 코드를 작성하면, 모든 테이블을 초기화한다고 함

 

sequelize.sync({force:true});

 

특정 테이블이 아니고, 모든 테이블을 초기화한다는 점을 주의

 

 

작성하고, 리액트를 재시작해보면... 생성한 테이블이 모두 없어져있다

 

 

 

백엔드 콘솔도 다음과 같이 에러남

 

 

 

참조

 

https://blog.naver.com/PostView.naver?blogId=sejun3278&logNo=221574943121&parentCategoryNo=&categoryNo=11&viewDate=&isShowPopularPosts=false&from=postView

React로 블로그 만들기 10 : [Sequelize] 4. 데이터 삭제 (Delete) 하기