[React] nodejs + mysql 연동 (1)

(1) server 세팅

npm init -y
npm install express
npm install nodemon
npm install cors

 

- server.js

const express = require('express');
const db = require('/database/db');
const app = express();
const path = require('path')
const port = 8009;

app.listen(port, function() {
	console.log(`listening on ${port}`);
});

app.use(express.json());
var cors = require('cors');
app.use(cors());

app.use(express.static(path.join(__dirname, 'react프로젝트경로/build')));

app.get('/', function(req, rew) {
	res.sendFile(path.join(__dirname, 'react프로젝트경로/build/index.html'));
});

 

▷ server-side rendering

   - '/'로 접속했을 때 'react프로젝트경로/build/index.html' 이 파일을 보내주세요.

app.get('/', function(req, res) {
	res.sendFile(path.join(__dirname, 'react프로젝트경로/build/index.html')):
});

 

▷ client-side rendering

   - React 파일에서 /list로 GET 요청하여 데이터를 받아온다.

   - React는 일반적으로 client-side rendering

app.get('/list', function(req, res) {
	res.json({name : '홍길동', age : 20});
});

 

 

(2) database 세팅

- mysql 세팅

 

- database > db.js

npm install mysql

const mysql = require('mysql');

const conn = mysql.createConnection({
	host: 'localhost',
    port: 3306,
    user: 'root',
    password: 'root',
    database: 'mydb'
});

conn.connect((err) => {
	if (err) console.log(err);
    else console.log('Connected to the database');
});

module.exports = conn;

 

 

(3) 쿼리문 호출

- server.js

const express = require('express');
const app = express();
const path = require('path');
const db = require('./database/db')

app.listen(8008, function () {
    console.log('listening on 8008')
})

app.use(express.json());
var cors = require('cors');
app.use(cors());

app.use(express.static(path.join(__dirname, 'react-project/build')))

app.get('/list', function(req, res) {
	db.query('SELECT id, name, age FROM USER', function(err, results, fields) {
    	if(err) throw err;
        res.send(results);
    })
});

app.get('/list/insert', function(req, res) {
	const data = req.body;
    
    data.forEach(item => {
    	db.query('INSERT INTO USER (name, age) VALUES (?, ?)',
        [item.name, item.age],
        (err, result) => {
        	if(err) throw err;
        })
    })
    
    res.send({ message: 'Data saved successfully!' });
});

 

- App.js

import { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [data, setData] = useState([]);
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  useEffect(() => {
    axios.get('http://localhost:8008/list')
      .then(response => {console.log(response); setData(response.data)})
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  const addData = () => {
    axios.post('http://localhost:8008/list/insert', { name, age })
      .then(response => setData(prevData => [ ...prevData, response.data ]))
      .catch(error => console.error('Error adding data:', error));
    setName('');
    setAge('');
  }

  return (
    <div className="App">
      <h1>React MySQL 연동</h1>
      <ul>
        {Array.isArray(data) && data.map(item => (
          <li key={item.id}>{item.name} ( {item.age} )</li>
        ))}
      </ul>

      <input type="text" placeholder="이름을 입력하세요." value={name} onChange={e => setName(e.target.value)} />
      <input type="text" placeholder="나이를 입력하세요." value={age} onChange={e => setAge(e.target.value)} />
      <button onClick={addData}>Add Data</button>
    </div>
  );
}

export default App;

 

☆ 소스 적용

(1) React 프로젝트

npm run build

 

(2) 서버

node server.js
nodemon server.js

nodemon을 설치한 경우에는 nodemon server.js를 사용하면 된다.

만약 설치를 안했다면 node server.js를 사용해야 하는데,

그럼 소스 수정할 때마다 실행을 해줘야한다.