React와 MySQL을 사용하여 안정적인 데이터베이스 애플리케이션을 구축하는 방법

React 및 MySQL을 사용하여 안정적인 데이터베이스 애플리케이션을 구축하는 방법

오늘날 디지털 및 지능형 시대에 데이터베이스 애플리케이션은 다양한 분야의 핵심 구성 요소가 되었습니다. 안정적인 데이터베이스 애플리케이션을 구축하려면 적절한 기술 스택을 선택하고 프런트엔드와 백엔드 간의 효과적인 협업이 필요합니다. 이 기사에서는 React와 MySQL을 사용하여 안정적인 데이터베이스 애플리케이션을 구축하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

1. 기술 선택
데이터베이스 애플리케이션을 구축할 때는 개발자와 프로젝트의 요구 사항에 맞는 기술을 선택하는 것이 중요합니다. React는 사용자 인터페이스 구축에 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 구성 요소화, 가상 DOM 및 기타 기능을 통해 개발자는 대화형 인터페이스를 빠르게 구축할 수 있습니다. MySQL은 높은 안정성과 신뢰성을 갖춘 성숙한 관계형 데이터베이스 관리 시스템입니다.

2. 프로젝트 준비

1. React 설치: React를 설치할 프로젝트의 루트 디렉터리에서 다음 명령을 실행합니다.

npx create-react-app my-app
cd my-app
npm start

2. MySQL 설치: 운영 체제에 따라 MySQL 설치가 달라집니다. 공식 문서(https://dev.mysql.com/doc/)에 따라 설치하고 구성할 수 있습니다.

3. 데이터베이스 연결
React 프로젝트에서는 타사 라이브러리를 사용하여 MySQL 데이터베이스에 연결할 수 있습니다. 일반적으로 사용되는 라이브러리는 mysql이며 다음 명령을 통해 설치할 수 있습니다. mysql，可以通过以下命令安装：

npm install mysql

在React项目的根目录下，我们可以新建一个db.js文件，用于数据库连接的配置：

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test',
});

connection.connect((err) => {
  if (err) {
    console.error('Error connecting to database: ', err);
  } else {
    console.log('Connected to database successfully');
  }
});

module.exports = connection;

上述代码中，我们使用了createConnection方法来创建数据库连接，并在connect回调函数中进行连接状态的判断。

四、查询数据
在React项目的src文件夹下，我们可以新建一个UserList.js文件用于展示用户列表：

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

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

  useEffect(() => {
    db.query('SELECT * FROM users', (err, results) => {
      if (err) {
        console.error('Error executing query: ', err);
      } else {
        setUsers(results);
      }
    });
  }, []);

  return (
    <div>
      <h1 id="User-List">User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

上述代码中，我们使用了useState和useEffect两个React Hook来管理状态和发送异步请求。在useEffect的回调函数中，我们通过query方法执行数据库查询，并将查询结果设置到users状态中。

五、插入数据
还是在UserList.js文件中，我们可以新增一个函数来处理用户的插入操作：

function insertUser() {
  const name = prompt('Please enter a name');

  if (name) {
    db.query('INSERT INTO users (name) VALUES (?)', [name], (err, results) => {
      if (err) {
        console.error('Error executing query: ', err);
      } else {
        alert('User inserted successfully');
        setUsers([...users, { id: results.insertId, name }]);
      }
    });
  }
}

在上述代码中，我们使用了prompt方法来弹出一个提示框，要求用户输入一个名称。然后，我们使用INSERT INTO语句将用户数据插入到数据库中，并通过setUsers方法更新usersrrreee

React 프로젝트의 루트 디렉터리에서 새로운 db.js를 생성할 수 있습니다. 데이터베이스 연결 구성을 위한 파일:

rrreee
위 코드에서는 createConnection 메서드를 사용하여 데이터베이스 연결을 생성하고 connect 콜백 함수에서 연결 상태를 판단합니다. .

🎜4. 데이터 쿼리🎜React 프로젝트의 src 폴더에서 새로운 UserList.js 파일을 생성하여 사용자 목록을 표시할 수 있습니다: 🎜rrreee🎜 위의 코드에서는 두 개의 React Hooks useState 및 useEffect를 사용하여 상태를 관리하고 비동기 요청을 보냈습니다. useEffect의 콜백 함수에서는 query 메서드를 통해 데이터베이스 쿼리를 실행하고 쿼리 결과를 users 상태로 설정합니다. 🎜🎜5. 데이터 삽입🎜UserList.js 파일에 사용자의 삽입 작업을 처리하는 새로운 함수를 추가할 수 있습니다. 🎜rrreee🎜위 코드에서는 prompt 메소드를 사용하여 사용자에게 이름을 입력하라는 프롬프트 상자를 표시합니다. 그런 다음 <code>INSERT INTO 문을 사용하여 사용자 데이터를 데이터베이스에 삽입하고 setUsers 메서드를 통해 users 상태를 업데이트합니다. 🎜🎜6. 요약🎜React와 MySQL을 결합하면 안정적인 데이터베이스 애플리케이션을 구축할 수 있습니다. 이 문서에서는 환경 설정, 데이터베이스 연결, 데이터 쿼리, 데이터 삽입 및 기타 작업 방법을 소개하고 해당 코드 예제를 제공합니다. 이 기사가 독자들이 실제 프로젝트에 React와 MySQL을 적용하여 안정적인 데이터베이스 애플리케이션을 구축하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 React와 MySQL을 사용하여 안정적인 데이터베이스 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!