React와 MongoDB를 사용하여 확장 가능한 데이터베이스 애플리케이션을 구축하는 방법

React 및 MongoDB를 사용하여 확장 가능한 데이터베이스 애플리케이션을 구축하는 방법

현대 소프트웨어 개발에서는 확장 가능한 데이터베이스 애플리케이션 구축이 점점 더 중요해지고 있습니다. 인기 있는 JavaScript 라이브러리인 React는 효율적이고 유연한 구성 요소 기반 개발 방법으로 유명합니다. MongoDB는 확장성과 고성능을 갖춘 비관계형 데이터베이스입니다. 이 기사에서는 React와 MongoDB를 결합하여 확장 가능한 데이터베이스 애플리케이션을 구축하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 개발 환경 설치 및 구성
먼저 해당 개발 환경을 설치하고 구성해야 합니다. Node.js와 npm(노드 패키지 관리자)이 설치되어 있는지 확인하세요. 다음 명령을 실행하여 설치 여부를 확인할 수 있습니다.

node -v
npm -v

다음으로 npm install create-react-app을 사용하여 새 React 프로젝트를 만듭니다. 다음 명령을 실행하세요:

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

작업이 성공하면 개발 서버가 로컬로 시작되고 React 애플리케이션이 브라우저에서 열립니다.

2. MongoDB 데이터베이스에 연결
React 애플리케이션에서 데이터베이스를 사용하기 전에 MongoDB에 연결해야 합니다. 먼저 MongoDB가 설치되어 있고 MongoDB 서비스가 시작되었는지 확인하세요.

다음으로 데이터베이스 운영에 편리한 API를 제공하는 MongoDB용 Node.js 드라이버로 Mongoose를 사용하겠습니다. 다음 명령을 사용하여 Mongoose를 설치합니다.

npm install mongoose

React 애플리케이션의 src 디렉터리에 db.js라는 파일을 만들고 다음 코드를 추가합니다.

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_database', { useNewUrlParser: true });

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Database connected!');
});

3. 데이터 모델을 생성합니다.
데이터베이스에 연결한 후 다음 작업을 수행해야 합니다. 데이터 모델을 정의합니다. React 애플리케이션의 src 디렉터리에 models라는 폴더를 만들고 그 안에 user.js라는 파일을 만듭니다. user.js 파일에 다음 코드를 추가합니다:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  age: Number,
  email: String,
});

const User = mongoose.model('User', userSchema);

module.exports = User;

4. React 구성 요소 작성
다음으로 데이터베이스의 데이터를 표시하고 조작하는 React 구성 요소를 작성하겠습니다. React 애플리케이션의 src 디렉터리에 Components라는 폴더를 만들고 그 안에 UserList.js라는 파일을 만든 후 다음 코드를 추가합니다.

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

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

  useEffect(() => {
    axios.get('/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <div>
      <h1 id="User-List">User List</h1>
      {users.map((user) => (
        <div key={user._id}>
          <p>Name: {user.name}</p>
          <p>Age: {user.age}</p>
          <p>Email: {user.email}</p>
        </div>
      ))}
    </div>
  );
};

export default UserList;

위 코드에서는 axios 라이브러리를 사용하여 GET 요청을 보내고 가져옵니다. 데이터베이스에 사용자 데이터를 저장한 다음 useState 및 useEffect를 사용하여 사용자 데이터의 상태를 관리하고 업데이트합니다.

다음으로 App.js 파일의 UserList 구성 요소를 사용합니다.

import React from 'react';
import UserList from './components/UserList';

const App = () => {
  return (
    <div>
      <UserList />
    </div>
  );
};

export default App;

5. 애플리케이션 시작
이제 데이터베이스에 연결하고 사용자 데이터를 표시하는 React 구성 요소를 작성했습니다. 다음 명령을 실행하여 React 애플리케이션을 시작하세요.

npm start

브라우저를 열면 http://localhost:3000 주소에서 애플리케이션이 성공적으로 시작되고 데이터베이스의 사용자 데이터가 표시되는 것을 확인할 수 있습니다.

6. 확장된 애플리케이션 기능
위의 기본 애플리케이션을 기반으로 양식을 추가하여 사용자를 추가하고 편집할 수도 있습니다. UserList.js 컴포넌트에 다음 코드를 추가합니다.

const [name, setName] = useState('');
const [age, setAge] = useState('');
const [email, setEmail] = useState('');

const addUser = () => {
  axios.post('/users', { name, age, email }).then((response) => {
    setUsers([...users, response.data]);
  });
};

render 메소드에서 사용자 정보를 입력하는 폼을 추가하고 addUser 메소드를 호출하여 새로운 사용자를 추가합니다.

유사한 코드를 추가하여 사용자 편집 및 삭제 기능도 구현할 수 있습니다.

7. 요약
이 글에서는 React와 MongoDB를 사용하여 확장 가능한 데이터베이스 애플리케이션을 구축하는 방법을 소개합니다. 먼저 Mongoose를 통해 MongoDB에 연결한 다음 데이터 모델을 정의하고 React를 사용하여 데이터 표시 및 운영을 위한 구성 요소를 작성합니다. 표시된 코드 예제를 통해 React 애플리케이션에서 MongoDB를 사용하는 방법을 깊이 이해할 수 있습니다. 이 기사가 확장 가능한 데이터베이스 애플리케이션을 구축하는 데 도움이 되기를 바랍니다.

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