4. React Sequelize로 Mysql 편리하게 사용하기 - 데이터추가

브라우저 화면에서 폼태그로 입력된 값을 DB의 sample1s테이블(컬럼 : id, name, email)에 추가하는 방법을 알아보겠습니다.

 

진행할 작업내용 :

• 화면단에서 보낸 데이터를 서버에서 읽을 수 있도록 body-parser모듈 설치
• server/models/index.js에 대상table(sample1 - sample1s in DB)이 정의되었는지 확인
• server/server.js에 sample1s테이블(from DB)을 서버로 불러와 읽을 수 있도록 코드 추가
• server/server.js에 정해진 URI로 보내온 데이터를 DB에 저장하는 코드 추가
• App.js에 폼태그화면 구성과 버튼클릭시 setState된 데이터를 서버로 전송하는 코드 작성
• 최종 작업된 화면에서 데이터전송하여 DB저장여부 확인 

 

 

 

body-parser모듈 설치

npm install body-parser

yarn add body-parser

 

설치완료 후 server/server.js에 body-parser을 불러서 적용하는 코드를 넣어줍니다.

 

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 PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
    console.log(`Server On : http://localhost:${PORT}/`);
})

 

 

 

models/index.js에서 데이터를 추가할 table정의

 

models/index.js의 전체 코드입니다.

 

'use strict';

const path = require('path');
const Sequelize = require('sequelize');
const env = process.env.NODE_ENV || 'development';
const config = require(path.join(__dirname, '..', 'config', 'db.json'))[ env ];
const db = {};

let sequelize = new Sequelize(
    config.database,
    config.username,
    config.password,
    config,
    {
      define: {
        charset: 'utf8',
        collate: 'utf8_general_ci'
      }
    }
  );
  
    db.sequelize = sequelize;
    db.Sequelize = Sequelize;

    db.sequelize
    .authenticate()
    .then(() => {
        console.log('Connection has been established successfully.');
    })
    .catch(err => {
        console.log('Unable to connect to the database: ', err);
    });

    db.Sample1 = require('./sample1')(sequelize, Sequelize);

db.secret = '(9*)5$&!3%^0%^@@2$1!#5@2!4';
module.exports = db;

 

 

 

 

DB의 대상table을 연결하는 코드를 server/server.js에 추가

bodyParser을 사용하는 코드 아래에 Sample1테이블을 읽어오는 코드를 추가합니다.

 

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

 

 

 

 

지정된 URI로 데이터를 받아 DB에 저장하는 코드 추가

server/server.js에서 위에 추가한 코드부분 아래 post로 받은 데이터를 서버콘솔에서 확인하고 DB에 추가하는 코드를 넣어줍니다.

 

app.post('/add/data', (req, res) => {
    console.log(req.body);

    Sample1.create({
        name : req.body.name,
        email : req.body.email
    })
    .then( result => {
        res.send(result)
    })
    .catch( err => {
        console.log(err)
        throw err;
    })
})

 

 

최종 수정된 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.post('/add/data', (req, res) => {
    console.log(req.body);

    Sample1.create({
        name : req.body.name,
        email : req.body.email
    })
    .then( result => {
        res.send(result)
    })
    .catch( err => {
        console.log(err)
        throw err;
    })
})

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

 

 

 

화면구성 및 form데이터 전송 코드 추가

다음 코드의 내용을 해석해보면 화면에 render되는 폼에서 각각의 input값이 변경될 때마다 _nameUpdate()와 _emailUpdate()가 호출되어 state에 준비된 name과 email의 값을 담아줍니다. 그리고 Add버튼을 클릭하면 _addData가 호출되어 state에 저장된 값을 post로 서버에 보내게 됩니다.

 

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


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name : '',
      email : ''
    }
  };

  _addData = async(e) => {
    const { name, email } = this.state;
    e.preventDefault();

    const res = await axios('/add/data', {
      method : 'POST',
      data : { 
        'name' : name,
        'email' : email
     },
      headers: new Headers()
    });

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

  _nameUpdate(e) {
    this.setState({ name : e.target.value })
  }
  _emailUpdate(e) {
    this.setState({ email : e.target.value })
  }

  render() {
    return(
      <div className='App'>
        <h3>Hello, You are testing React!</h3>
        <form method='POST' onSubmit={this._addData}>
          <input type='text' maxLength='10' placeholder='name' onChange={(e) => this._nameUpdate(e)}/>
          <input type='text' maxLength='20' placeholder='email' onChange={(e) => this._emailUpdate(e)}/>
          <input type='submit' value='Add' />
        </form>
      </div>
    )
  };
};


export default App;

 

 

 

 

브라우저화면에서 데이터추가 요청 및 DB에 추가여부 확인

이제 서버와 react를 시작(또는 재시작)하여 잘 동작되는지 여부를 확인합니다.

 

 

서버콘솔에 데이터가 잘 들어왔네요.

 

 

DB에도 데이터가 잘 저장되었습니다.