react와 express 서버 연동 익히기 8편 -DB 데이터 수정하기-

1. App.js 수정

 

App.js에 데이터를 수정하는 함수 modifyData를 작성

 

  async function modifyData(el) {

    const modify = prompt(el.name + '을 어떤 이름으로 변경할까요?')

    if (modify !== null) {
      const body = {
        name : modify,
        id : el.id
      }

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

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

 

 

그리고 return에 modify를 할 수 있는 버튼을 추가

 

  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% 30%', width: '50%', marginLeft:'25%'}}>
                <div> {el.id} </div>
                <div> {el.name} </div>
                {/* 추가 */}
                <div
                style={{color:'#ff3399'}}
                onClick={() => modifyData(el)}> Modify </div>
                {/* 추가 */}
                </div>
            )
          })
        : null}
        </div>
      </div>
    )

 

 

모든 데이터를 조회해서 실제 실행해보면 다음과 같다

 

 

2. 수정하는 api 추가

 

server.js에 수정을 하는 api를 추가

 

//server.js
//데이터 수정
app.post('/modify/data',(req,res) => {
    Teacher.update({ name: req.body.modify.name}, {
        where : {id : req.body.modify.id}
    })
    .then(result => { res.send(result) })
    .catch( err => { throw err })
})

 

update 메소드는 데이터를 변경하는 메소드이다.

 

첫번째 인자값으로, {변경할 데이터가 있는 컬럼의 이름: 변경하고 싶은 데이터}를 넣어준다.

 

두번째 인자값으로 where를 이용해 변경하고자 하는 데이터를 지정해준다.

 

 

 

예를 들어 '태연'이라는 데이터를 '신세경'으로 바꾸고 싶다면..

 

Teacher.update({name:'신세경'}, {
    where : {name:'태연"}
    })

 

처럼 사용가능하다.

 

name이 '태연'인 값을 찾았다면, 그 값을 '신세경'으로 바꾸겠다는 의미이다.

 

 

3. 데이터 수정하기

 

웹에서 Modify를 눌러보면... const modify = prompt(el.name+~)에 의해... 다음과 같이 창이 뜸

 

 

 

바꾸고 싶은 값으로 입력해보자.

 

신세경이라고 입력해보면... 데이터를 수정했다고 나오고..

 

 

 

진짜로 수정된 상태로 나온다

 

 

 

다음과 같이 DB도 수정된 상태로 나옴

 

 

 

4. 여러개의 데이터 수정

 

where에서 Op.or 연산을 이용해 여러개의 데이터들을 한번에 변경할 수도 있다.

 

//여러개의 데이터 수정

app.post('/modify/data', (req,res) => {
    Teacher.update({name:req.body.modify.name},{
        where:{[Op.or]: [{id:2},{name:'아이유'}]}
    })
    .then(result => {res.send(result)})
    .catch(err => {throw err})
})

 

이제 /modify/data로 요청이 들어오면, Teacher 테이블에서 id가 2이고, name이 아이유인 데이터는 모두 입력한 이름으로 바뀐다.

 

수지 옆에 modify를 눌러보고 카리나라고 적어보면..

 

 

다음과 같이 2번 4번이 모두 카리나로 바뀐다.

 

 

 

참조

 

React로 블로그 만들기 09 : [Sequelize] 3. 데이터 수정 (Update) 하기 : 네이버 블로그 (naver.com)

React로 블로그 만들기 09 : [Sequelize] 3. 데이터 수정 (Update) 하기