6. React Sequelize로 Mysql 편리하게 사용하기 - 데이터변경

한가지 데이터 변경하는 방법, 여러개의 데이터를 변경하는 법을 알아보겠습니다. 

데이터변경 역시 조회와 작업내용은 비슷합니다. 먼저 변경테스트를 위한 기본코드를 준비하고 App.js와 server.js에 각각 화면용 렌더링/데이터요청 코드와 데이터처리코드를 추가해주겠습니다.

 

 

 

데이터변경을 위한 기본준비

먼저 App.js에서 DB에 저장된 전체 목록을 화면에 보여주고 각 레코드마다 수정버튼을 추가해줍니다. 

 

import React, { Component } from "react";
import axios from 'axios';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sample1List : [],
    }
  };

  componentDidMount() {
    this._getData();
  }

  _getData = async () => {
    const res = await axios.get('/get/data');
    this.setState({ 
      sample1List : res.data
    })
  }

  // 이후 추가할 코드영역
  
  render() {
    const { sample1List } = this.state;

    return(
      <div className='App'>
        <h3>Hello, You are testing React!</h3>

        <h4> Sample1 List </h4>

        {sample1List.length !== 0 ? 
        sample1List.map( (el, key) => {
          return(
            <div key={key}>
              <span> ID: {el.id} </span>/
              <span> NAME: {el.name} </span>/
              <span> EMAIL: {el.email} </span>
              <button onClick={() => this._modify(el)}>modify</button>
            </div>
          )
        })
        : <div>데이터가 없습니다.</div>}
		
        <button onClick={this._modifyMulti}>modify 여러개</button>
      </div> 
    )
  };
};


export default App;

 

위의 onClick시 실행될 this._modify(el)부분은 해당하는 sample1List의 각 목록(el)을 인자로 넘겨 함수내부에서 해당하는 목록에 대한 값을 수정해주기 위함입니다. (_modify와 _modifyMulti함수는 이후에 추가해주겠습니다.)

server.js도 아래와 같이 코드를 준비해줍니다.

 

const express = require('express');
const app = express();

const sequelize = require('./models').sequelize;
const bodyParser = require('body-parser');

sequelize.sync();

app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

const {
    Sample1,
    Sequelize: { Op }
  } = require('./models');
sequelize.query('SET NAMES utf8;');

app.get('/get/data', (req, res) => {
   Sample1.findAll()
    .then( result => { res.send(result) })
    .catch( err => { throw err })
})

// 이후 추가할 코드영역

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
    console.log(`Server On : http://localhost:${PORT}/`);
})

 

 

 

한 개의 데이터변경 - update({ 변경할 값 }, { where : { 변경대상 }})

아래 코드는 name을 수정하기 위한 코드입니다.

App.js에서 _modify가 호출되면 prompt창을 통해 변경할 name값을 저장(변경할 대상을 확인하기 위해 id값을 함께 저장)하여 서버에 전송합니다. 수정완료응답이 도착하면 변경된 리스트를 다시 화면에 표시해주겠습니다.

_modify = async (el) => {
    const newName = prompt(el.name + '의 변경할 이름을 입력해주세요.')

    if(newName !== null) {
      const dataToModify = {
        newName : newName,
        id : el.id
      }

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

      if(res.data) {
        console.log(res.data[0]);
        alert('이름이 수정되었습니다.')
        return window.location.reload();
      }
    }
  }

 

server.js에서 '/modify/data'에 대한 요청을 처리할 코드를 넣어줍니다.

 

app.post('/modify/data', (req, res) => {
    Sample1.update({ name : req.body.modify.newName }, {
        where : { id : req.body.modify.id }
    })
    .then( result => { res.send(result) })
    .catch( err => { throw err })
})

 

서버와 react를 실행하여 브라우저에서 확인해봅니다.

 

처음 로딩시 화면

 

마지막 목록의 modify버튼을 클릭하여 이름 수정요청

수정된 이름이 적용됨

 

 

 

여러 개의 데이터 변경 - update({ 변경할 값 }, { where : {[Op.or] : [ 변경대상, 변경대상..]} }) 

id와 name으로 변경할 2개의 대상을 넘겨 모두 같은 이름으로 수정하는 작업을 테스트해보겠습니다.

App.js에서 아래 코드를 추가해줍니다. 'modify 여러개' 버튼 클릭시 변경할 2개의 대상 id/이름을 입력받습니다.

 

_modifyMulti = async (el) => {
    const targetId = prompt('변경할 대상 ID를 입력해주세요.')
    const targetName = prompt('변경할 대상 이름을 입력해주세요.')
    const newName = prompt('변경할 대상들의 새로운 이름을 입력해주세요.')

    if(newName !== null) {
      const dataToModify = {
        targetId : targetId,
        targetName : targetName,
        newName : newName
      }

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

      if(res.data) {
        console.log(res.data[0]);
        alert('요청하신 대상들의 이름이 수정되었습니다.')
        return window.location.reload();
      }
    }
  }

 

server.js에서도'/modify/multiData'에 대한 처리코드를 넣어줍니다.

 

app.post('/modify/multiData', (req, res) => {
    Sample1.update({ name : req.body.modify.newName }, {
        where : { [Op.or]: [{ id : req.body.modify.targetId }, { name : req.body.modify.targetName }]}
    })
    .then( result => { res.send(result) })
    .catch( err => { throw err })
})

 

서버를 재실행하여 id : 1번과 name : anne4인 대상의 이름을 anne10으로 수정요청했습니다.