리액트 프로젝트에 MySQL 데이터베이스 연결하는 방법

Prompt

---

리액트 MySQL 연결

---

리액트(React) 클라이언트에서 MySQL 데이터베이스에 직접 연결하는 것은 보안상 불가능합니다. 따라서 **React(프론트엔드) - Node.js/Express(백엔드) - MySQL(데이터베이스)**로 이어지는 3계층 구조를 만들어야 합니다.

입문자가 가장 접근하기 쉬운 **Node.js(Express)**를 활용한 연동 방법을 단계별로 설명해 드릴게요.

---

1. 아키텍처 이해하기

리액트는 브라우저에서 실행되므로, DB 비밀번호와 같은 민감한 정보가 노출되지 않도록 중간에 'API 서버'를 둡니다.

---

2. 백엔드 설정 (Node.js + MySQL)

먼저 백엔드 폴더를 만들고 필요한 라이브러리를 설치합니다. npm install express mysql2 cors dotenv

server.js 작성 예시

JavaScript

 

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(cors());
app.use(express.json()); // JSON 파싱

// DB 연결 설정
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'your_db_name'
});

// 데이터 조회 (READ)
app.get('/api/items', (req, res) => {
  db.query("SELECT * FROM items", (err, result) => {
    if (err) res.status(500).send(err);
    else res.send(result);
  });
});

// 데이터 추가 (CREATE)
app.post('/api/items', (req, res) => {
  const { name, content } = req.body;
  db.query("INSERT INTO items (name, content) VALUES (?, ?)", [name, content], (err, result) => {
    if (err) res.status(500).send(err);
    else res.send(result);
  });
});

app.listen(5000, () => console.log("Server running on port 5000"));

---

3. 프론트엔드 설정 (React + Axios)

리액트에서는 axios나 fetch를 사용하여 위에서 만든 API 서버에 요청을 보냅니다.

데이터 불러오기 및 추가 예시

JavaScript

 

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

function App() {
  const [items, setItems] = useState([]);
  const [name, setName] = useState('');

  // READ: 데이터 가져오기
  useEffect(() => {
    axios.get('http://localhost:5000/api/items')
      .then(res => setItems(res.data));
  }, []);

  // CREATE: 데이터 추가하기
  const addItem = () => {
    axios.post('http://localhost:5000/api/items', { name, content: '새 내용' })
      .then(() => {
        alert('추가 완료!');
        window.location.reload(); // 간단한 갱신
      });
  };

  return (
    <div>
      <input onChange={(e) => setName(e.target.value)} />
      <button onClick={addItem}>추가</button>
      <ul>
        {items.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

---

4. 실무형 팁 (Best Practices)

1. ORM 사용 고려: SQL문을 직접 쓰는 대신 Prisma나 Sequelize 같은 ORM을 사용하면 자바스크립트 객체처럼 DB를 다룰 수 있어 생산성이 훨씬 높아집니다.
2. 보안: .env 파일을 만들어 DB 접속 정보를 관리하고, 깃허브에 올리지 않도록 주의하세요.
3. 데이터 관리: 리액트에서는 앞서 추천드린 **TanStack Query (React Query)**를 사용해 백엔드 데이터를 관리하면 로딩 상태 처리와 캐싱이 매우 쉬워집니다.

---

---

---