React Mysql 예제 만들어줘

리액트(React)와 MySQL을 연동하여 간단한 CRUD(Create, Read, Update, Delete) 애플리케이션을 만드는 예제를 만들어 보겠습니다. 이 예제에서는 Node.js와 Express를 사용하여 백엔드를 구축하고, MySQL 데이터베이스와 연결합니다. 프론트엔드는 React를 사용하여 구현합니다.

1. 설정 및 환경 구성

Node.js 및 Express 서버 설정

먼저 Node.js 프로젝트를 초기화하고 필요한 패키지를 설치합니다.

# 프로젝트 폴더 생성
mkdir react-mysql-example
cd react-mysql-example

# Node.js 프로젝트 초기화
npm init -y

# 필요한 패키지 설치
npm install express mysql cors body-parser

server.js 파일을 생성하고 다음과 같이 작성합니다.

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(bodyParser.json());

// MySQL 연결 설정
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',  // MySQL 사용자 이름
    password: '',  // MySQL 비밀번호
    database: 'testdb'  // 사용할 데이터베이스 이름
});

// MySQL 연결
db.connect(err => {
    if (err) {
        throw err;
    }
    console.log('MySQL Connected...');
});

// 데이터베이스 초기화 (테이블 생성)
app.get('/init', (req, res) => {
    let sql = 'CREATE TABLE IF NOT EXISTS items(id INT AUTO_INCREMENT, name VARCHAR(255), PRIMARY KEY(id))';
    db.query(sql, (err, result) => {
        if (err) throw err;
        res.send('Items table created...');
    });
});

// 데이터 삽입
app.post('/add', (req, res) => {
    let newItem = { name: req.body.name };
    let sql = 'INSERT INTO items SET ?';
    db.query(sql, newItem, (err, result) => {
        if (err) throw err;
        res.send('Item added...');
    });
});

// 데이터 조회
app.get('/items', (req, res) => {
    let sql = 'SELECT * FROM items';
    db.query(sql, (err, results) => {
        if (err) throw err;
        res.json(results);
    });
});

// 데이터 업데이트
app.put('/update/:id', (req, res) => {
    let newName = req.body.name;
    let sql = `UPDATE items SET name = '${newName}' WHERE id = ${req.params.id}`;
    db.query(sql, (err, result) => {
        if (err) throw err;
        res.send('Item updated...');
    });
});

// 데이터 삭제
app.delete('/delete/:id', (req, res) => {
    let sql = `DELETE FROM items WHERE id = ${req.params.id}`;
    db.query(sql, (err, result) => {
        if (err) throw err;
        res.send('Item deleted...');
    });
});

// 서버 시작
const PORT = 5000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

MySQL 설정

MySQL 데이터베이스를 설정하고 testdb라는 데이터베이스를 생성합니다.

CREATE DATABASE testdb;

2. 리액트 설정

리액트 애플리케이션을 생성하고 필요한 패키지를 설치합니다.

# 리액트 애플리케이션 생성
npx create-react-app client
cd client

# axios 설치 (API 호출을 위해 사용)
npm install axios

리액트 컴포넌트 작성

src 폴더에 App.js 파일을 수정하여 CRUD 기능을 구현합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
    const [items, setItems] = useState([]);
    const [name, setName] = useState('');
    const [editing, setEditing] = useState(false);
    const [currentItem, setCurrentItem] = useState(null);

    useEffect(() => {
        fetchItems();
    }, []);

    const fetchItems = async () => {
        const response = await axios.get('http://localhost:5000/items');
        setItems(response.data);
    };

    const addItem = async () => {
        if (name === '') return;
        await axios.post('http://localhost:5000/add', { name });
        setName('');
        fetchItems();
    };

    const updateItem = async (id) => {
        if (name === '') return;
        await axios.put(`http://localhost:5000/update/${id}`, { name });
        setName('');
        setEditing(false);
        setCurrentItem(null);
        fetchItems();
    };

    const deleteItem = async (id) => {
        await axios.delete(`http://localhost:5000/delete/${id}`);
        fetchItems();
    };

    const editItem = (item) => {
        setEditing(true);
        setName(item.name);
        setCurrentItem(item);
    };

    return (
        <div className="App">
            <h1>Item List</h1>
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />
            <button onClick={editing ? () => updateItem(currentItem.id) : addItem}>
                {editing ? 'Update' : 'Add'}
            </button>
            <ul>
                {items.map((item) => (
                    <li key={item.id}>
                        {item.name}
                        <button onClick={() => editItem(item)}>Edit</button>
                        <button onClick={() => deleteItem(item.id)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

3. 애플리케이션 실행

백엔드 서버 실행

node server.js

리액트 애플리케이션 실행

cd client
npm start

이제 브라우저에서 http://localhost:3000에 접속하면 아이템 리스트를 추가, 조회, 수정, 삭제할 수 있는 간단한 애플리케이션을 확인할 수 있습니다.