React와 MariaDB를 사용하여 CRUD

아래는 React + MariaDB로 기본 CRUD(Create/Read/Update/Delete)를 구현하는 표준적인 풀스택 구조 예제입니다. 실무에서 바로 확장 가능한 형태로 정리했습니다.

---

1️⃣ 전체 아키텍처

[ React (Frontend) ]
        |
        |  REST API (JSON)
        v
[ Node.js + Express (Backend API) ]
        |
        |  SQL
        v
[ MariaDB ]

---

2️⃣ MariaDB 테이블 설계

CREATE DATABASE crud_db;
USE crud_db;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(200) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

3️⃣ Backend (Node.js + Express)

3.1 필수 패키지 설치

npm init -y
npm install express cors mysql2

---

3.2 DB 연결 (db.js)

const mysql = require('mysql2');

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'crud_db',
  waitForConnections: true,
  connectionLimit: 10
});

module.exports = pool.promise();

---

3.3 Express 서버 (server.js)

const express = require('express');
const cors = require('cors');
const db = require('./db');

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

/* CREATE */
app.post('/users', async (req, res) => {
  const { name, email } = req.body;
  await db.query(
    'INSERT INTO users (name, email) VALUES (?, ?)',
    [name, email]
  );
  res.sendStatus(201);
});

/* READ */
app.get('/users', async (req, res) => {
  const [rows] = await db.query('SELECT * FROM users');
  res.json(rows);
});

/* UPDATE */
app.put('/users/:id', async (req, res) => {
  const { name, email } = req.body;
  await db.query(
    'UPDATE users SET name=?, email=? WHERE id=?',
    [name, email, req.params.id]
  );
  res.sendStatus(200);
});

/* DELETE */
app.delete('/users/:id', async (req, res) => {
  await db.query('DELETE FROM users WHERE id=?', [req.params.id]);
  res.sendStatus(200);
});

app.listen(4000, () => {
  console.log('Server running on port 4000');
});

---

4️⃣ Frontend (React)

4.1 프로젝트 생성

npx create-react-app frontend
cd frontend
npm install axios

---

4.2 API 호출 유틸 (api.js)

import axios from 'axios';

export default axios.create({
  baseURL: 'http://localhost:4000'
});

---

4.3 CRUD 컴포넌트 (UserCrud.js)

import { useEffect, useState } from 'react';
import api from './api';

function UserCrud() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const loadUsers = async () => {
    const res = await api.get('/users');
    setUsers(res.data);
  };

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

  const createUser = async () => {
    await api.post('/users', { name, email });
    setName('');
    setEmail('');
    loadUsers();
  };

  const deleteUser = async (id) => {
    await api.delete(`/users/${id}`);
    loadUsers();
  };

  return (
    <div>
      <h2>User CRUD</h2>

      <input
        placeholder="Name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <input
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button onClick={createUser}>Add</button>

      <ul>
        {users.map(u => (
          <li key={u.id}>
            {u.name} ({u.email})
            <button onClick={() => deleteUser(u.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserCrud;

---

4.4 App.js

import UserCrud from './UserCrud';

function App() {
  return <UserCrud />;
}

export default App;

---

5️⃣ 실행 순서

1. MariaDB 실행
2. Backend
3. node server.js
4. Frontend
5. npm start

---

6️⃣ 실무 확장 포인트

• 트랜잭션 (BEGIN / COMMIT)
• DTO + Validation (Joi, Zod)
• Pagination / Search
• JWT 인증
• React Query / Zustand
• TypeScript 전환

---

원하시면:

• TypeScript 버전
• Spring Boot + MariaDB 비교
• REST → GraphQL
• Docker Compose 구성
  까지 바로 이어서 정리해 드릴 수 있습니다.