[React] React에서 MySQL 연동하기 (Express 서버로 API연결하기)

본 포스팅은 React 18, mysql 환경에서 작성되었습니다.

 

---

목차

개발 환경 구성

Express 서버에서 MySQL 연결하기

API 서버 만들기

React에서 API 호출하기

 

 

---

https://devyihyun.tistory.com/62

[DateBase] MySQL 설치하기

 

---

 

[개발 환경 구성]

• 프론트엔드 : 리액트 18
• 백엔드 : express
• DB : MySQL

React 환경에서 회원가입, 로그인, 계정 찾기, 마이페이지를 구현하기 위해 MySQL을 사용했다.

package.json

{
    "name": "projectName",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@tanstack/react-query": "^5.66.0",
        "axios": "^1.7.9",
        "cors": "^2.8.5",
        "cra-template": "1.2.0",
        "dotenv": "^16.4.7",
        "jsonwebtoken": "^9.0.2",
        "mysql2": "^3.12.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-icons": "^5.4.0",
        "react-naver-maps": "^0.1.3",
        "react-router-dom": "^7.1.1",
        "react-scripts": "5.0.1",
        "styled-components": "^6.1.14",
        "web-vitals": "^4.2.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

 

 

<폴더 구조>

폴더구조

project/
 ├─ node_modules
 ├─ public
 ├─ server/            # Node.js(Express) 서버
 │   ├─ server.js
 │   └─ .env           # server의 환경 변수
 ├─ src/               # React 프로젝트
 └─ ...

 

<필요 패키지 설치>

이때 server 폴더에 설치해도 됩니다.

하지만 저는 DB 설계부터 구현까지가 목표였기 때문에 라이브러리 설치는 프로젝트에 설치해 주었습니다.

npm install cors body-parser mysql2 dotenv

• cors : React와 Express 간 cors 문제 해결
• body-parser : POST 요청 데이터 파싱
• mysql12 : Mysql 연결 라이브러리
• dotenv 환경 변수 관리

 

[❓질문]  그냥 .env 파일 생성하면 되지 않나요? dotenv 설치를 왜 해야 하나요?

→ 네 꼭 해야 합니다. 저도 알고 싶지 않았습니다 ㅠㅠ 설치 안 하고 .env파일을 직접 생성해서 프로젝트를 진행했었는데 환경 변수를 인식하지 못하는 이슈가 있었습니다. 그래서 설치를 권장합니다. 여러분들의 시간은 소중하니까~

 

❗🔥가장 중요한 .gitignore에 .env를 추가해야 합니다.

.env 파일에 환경변수를 저장하더라도 .env 파일을 깃허브에 올린다면 집 비밀번호를 공개하는 것과 다름이 없습니다.

그렇기 때문에 .gitignore에 꼭 추가해 주어야 합니다.🔥❗

 

환경변수를 설정한 뒤에는 restart를 해주어야 합니다.

 

---

[Express 서버에서 MySQL 연결하기]

.env에 환경변수를 설정해 둡니다.

이때 .env는 server.js와 같은 폴더에 있어야합니다.

.env 파일

DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=1234
DB_NAME=react_project
SERVER_PORT=3001

 

 

---

[API 서버 만들기]

 

//.env는 server.js와 같은 폴더에 있어야한다.
require("dotenv").config(); // .env 읽기
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const mysql = require("mysql2");

const app = express();
const port = process.env.SERVER_PORT;

// Mysql 연결 설정
var connection = mysql.createConnection({
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
});

// var connection = mysql.createConnection({
//     host: "localhost",
//     port: "3306",
//     user: "root",
//     password: "1234",
//     database: "react_project",
// });

// Mysql 연결
connection.connect((err) => {
    if (err) {
        console.error("Database connection failed:", err);
        return;
    }
    console.log("Connected to the database.");
});

// 미들웨어 설정
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());

//API 예시
app.get("/", (req, res) => {
    res.send("프로젝트 코딩 중!");
});

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

server.js

 

React와 Express 서버는 서로 다른 프로세스로 동작하기 때문에 각각 따로 실행해야 한다.

즉, 백엔드 서버와 프론트엔드를 각각 동시에 실행해야 정상적으로 동작한다.

 

<백엔드 서버 실행>

먼저 server.js가 있는 폴더로 이동한다. [project/server]

cd server

 

이후 명령어로 서버를 실행한다.

node server.js

 

서버가 정상적으로 실행되면 http://localhost:3001에서 API를 확인할 수 있다.

 

<프론트엔드 실행>

다음으로 프로젝트 루트 경로에서 React를 실행한다. [project/]

npm run start

브라우저에서 http://localhost:3000으로 접속하면 화면을 확인할 수 있다.

 

<각각 동시에 실행해야 하는 이유>

node server.js 명령어는 Express 서버만 실행할 뿐, React까지 함께 실행되지는 않는다.

따라서 아래와 같이 두 개의 터미널을 사용해 각각 실행해야한다.

 

왼쪽 : 프론트, 오른쪽 : 백엔드

왼쪽 : 프론트, 오른쪽 : 백엔드

 

이번 게시글에서는 각각 따로 동시에 실행하는 것을 설명하고 있습니다.

추후에 명령어 하나로 동시에 실행하는 방법에 대해 게시글을 작성해보도록 하겠습니다.

 

---

[React에서 API 호출하기]

이제 Express 서버에서 만든 API를 React에서 호출할 수 있습니다.

React에서는 fetch를 사용하여 서버로 요청을 보내고 데이터를 받아올 수 있습니다.

 

src/App.js 파일에 코드를 작성합니다.

import { useEffect, useState } from "react";

function App() {
    const [message, setMessage] = useState("");

    useEffect(() => {
        fetch("http://localhost:3001/") // 서버 API 호출
            .then((res) => res.text())
            .then((data) => setMessage(data))
            .catch((err) => console.error(err));
    }, []);

    return (
        <div>
            <h1>{message}</h1>
        </div>
    );
}

export default App;

 

• useState : 서버에서 받아온 데이터를 저장히가 위한 상태
• useEffect : 컴포넌트가 처음 렌더링 될 때 API를 호출하기 위해 사용
• fetch("http://localhost:3001/") : Express 서버에 요청을 보내는 부분
• .then((res) => res.text()) : 서버에서 받은 응답을 문자열로 변환 
• .then((data) => setMessage(data)) : 변환된 데이터를 상태에 저장

 

React와 Express 서버를 모두 실행한 상태에서 브라우저 화면에서 확인하면 서버에서 보낸 데이터가 화면에 출력되는 것을 볼 수 있다.

서버 연동 성공!

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]