[React] React, MySQL, node.js 연동 방법

안녕하세요, hr0513입니다! 🥰

React, MySQL, node.js 연동 방법에 대해 소개해드리겠습니다

 

✔️ 진행할 내용:

1. MySQL 설치 및 실행
2. 데이터베이스 및 사용자 생성
3. 테이블 생성 및 데이터 추가
4. Node.js에서 MySQL 연결
5. React에서 MySQL 데이터 가져오기

---

1. MySQL 설치 및 실행

Windows

1. MySQL 공식 사이트에서 다운로드 및 설치
2. MySQL Workbench 또는 명령 프롬프트에서 실행

---

2. 데이터베이스 및 사용자 생성

터미널에서 MySQL에 접속한 후, 데이터베이스와 사용자를 생성합니다.

-- 1. 데이터베이스 생성
CREATE DATABASE myappdb;

-- 2. 새로운 사용자 생성
CREATE USER 'appuser'@'localhost' IDENTIFIED BY 'mypassword';

-- 3. 사용자에게 권한 부여
GRANT ALL PRIVILEGES ON myappdb.* TO 'appuser'@'localhost';
FLUSH PRIVILEGES;

-- 4. 생성한 데이터베이스 사용
USE myappdb;

 

✔️ 여기서 myappdb는 데이터베이스 이름이므로 원하는 이름으로 변경 가능
✔️ appuser는 MySQL 접속에 사용할 계정 이름이며 mypassword는 비밀번호

---

3. 테이블 생성 및 데이터 추가

이제 users라는 테이블을 만들어 데이터를 저장합니다.

-- 1. users 테이블 생성
CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL UNIQUE
);

-- 2. 데이터 삽입
INSERT INTO users (name, email) VALUES ('Alice', 'alice@example.com');
INSERT INTO users (name, email) VALUES ('Bob', 'bob@example.com');

---

4. Node.js에서 MySQL 연결

이제 Node.js에서 MySQL과 연결하고 데이터를 가져오는 API를 만들어보겠습니다.

 

4-1. Node.js 프로젝트 초기화

터미널에서 server 폴더로 이동 후, 프로젝트를 생성하고 필요한 패키지를 설치합니다.

mkdir server
cd server
npm init -y
npm install express mysql2 cors

 

4-2. server/index.js 파일 작성

Node.js에서 MySQL에 연결하고, 데이터를 조회하는 API를 만듭니다.

// server/index.js
const express = require('express');
const cors = require('cors');
const mysql = require('mysql2');

// Express 앱 생성
const app = express();
const port = 5000; // 서버 포트 설정

// CORS 설정 (React와 Node.js의 다른 포트 문제 해결)
app.use(cors());
app.use(express.json());

// MySQL 데이터베이스 연결 설정
const db = mysql.createConnection({
  host: 'localhost',
  user: 'appuser', // 위에서 생성한 사용자
  password: 'mypassword', // 사용자 비밀번호
  database: 'myappdb', // 사용할 데이터베이스
});

// MySQL 연결 확인
db.connect((err) => {
  if (err) {
    console.error('MySQL 연결 오류:', err);
    return;
  }
  console.log('MySQL 연결 성공!');
});

// 사용자 목록 가져오기 API
app.get('/api/users', (req, res) => {
  db.query('SELECT * FROM users', (err, results) => {
    if (err) {
      return res.status(500).json({ error: '데이터베이스 조회 오류' });
    }
    res.json(results); // 데이터를 JSON 형태로 반환
  });
});

// 서버 실행
app.listen(port, () => {
  console.log(`서버 실행 중: http://localhost:${port}`);
});

 

4-3. Node.js 서버 실행

node index.js

 

실행되면 http://localhost:5000/api/users에서 MySQL 데이터를 확인할 수 있어요

 

---

5. React에서 MySQL 데이터 가져오기

이제 React에서 Node.js API를 호출하여 데이터를 화면에 표시해보겠습니다.

 

5-1. React 프로젝트 생성

React 프로젝트를 만들고 Vite + PWA 설정을 적용합니다.

mkdir client
cd client
npm create vite@latest my-react-pwa --template react
cd my-react-pwa
npm install
npm install vite-plugin-pwa

 

5-2. client/src/App.js 수정

React에서 API를 호출하여 사용자 목록을 가져오도록 코드를 작성합니다.

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

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/api/users') // Node.js API 호출
      .then((response) => response.json())
      .then((data) => setUsers(data))
      .catch((error) => console.error('데이터 가져오기 오류:', error));
  }, []);

  return (
    <div className="App">
      <h1>사용자 목록</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 

5-3. React 앱 실행

npm run dev

 

---

이제 Node.js + MySQL + React가 완벽하게 연동되었어요