MERN 스택 시리즈!-JS 튜토리얼-php.cn

MERN 스택 시리즈!

Barbara Streisand

풀어 주다： 2024-11-15 04:52:02

원래의

792명이 탐색했습니다.

The MERN stack series !

포스트 5: React로 프런트엔드 사용자 인터페이스 구축

Post 4에서는 사용자 데이터에 대한 CRUD 작업을 처리하기 위해 Express와 Node.js를 사용하여 RESTful API를 개발했습니다. 이제 React를 사용하여 사용자가 백엔드와 통신하는 대화형 인터페이스를 통해 데이터를 보고, 추가하고, 업데이트하고, 삭제할 수 있는 프런트엔드 UI를 만들 차례입니다.

1. 프론트엔드 프로젝트 설정

먼저 MERN 스택 프로젝트 내에서 프런트엔드 설정이 준비되었는지 확인하세요.

frontend 폴더로 이동하여 HTTP 요청 처리를 위해 Axios를 설치합니다.

  cd frontend
  npm install axios

로그인 후 복사

Axios를 사용하면 Express API에 요청을 쉽게 보낼 수 있습니다.

2. 기본 React 구성요소 생성

사용자를 나열하는 기본 구성 요소와 사용자를 추가하거나 편집하는 양식 구성 요소 등 사용자 관리를 위한 구성 요소를 만듭니다.

구성 요소 폴더 구성

src 내부에 다음 파일이 포함된 구성 요소 폴더를 만듭니다.

UserList.js - 사용자 목록
UserForm.js - 사용자 생성 및 편집

UserList 구성 요소

UserList는 백엔드에서 사용자 데이터를 가져와 목록에 표시합니다. UserList.js에 다음 코드를 추가하세요.

// src/components/UserList.js
import React, { useState, useEffect } from "react";
import axios from "axios";

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

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get("/api/users");
        setUsers(response.data);
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    };
    fetchUsers();
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user._id}>
            {user.name} - {user.email}
            <button onClick={() => onEdit(user)}>Edit</button>
            <button onClick={() => onDelete(user._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

로그인 후 복사

사용자 폼 구성 요소

UserForm 구성 요소는 사용자 생성 및 업데이트를 처리합니다.

// src/components/UserForm.js
import React, { useState, useEffect } from "react";
import axios from "axios";

const UserForm = ({ selectedUser, onSave }) => {
  const [formData, setFormData] = useState({ name: "", email: "", password: "" });

  useEffect(() => {
    if (selectedUser) {
      setFormData(selectedUser);
    }
  }, [selectedUser]);

  const handleChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async e => {
    e.preventDefault();
    try {
      if (selectedUser) {
        await axios.put(`/api/users/${selectedUser._id}`, formData);
      } else {
        await axios.post("/api/users", formData);
      }
      onSave();
      setFormData({ name: "", email: "", password: "" });
    } catch (error) {
      console.error("Error saving user:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} placeholder="Name" required />
      <input name="email" value={formData.email} onChange={handleChange} placeholder="Email" required />
      <input name="password" value={formData.password} onChange={handleChange} placeholder="Password" required />
      <button type="submit">{selectedUser ? "Update User" : "Add User"}</button>
    </form>
  );
};

export default UserForm;

로그인 후 복사

3. 앱 구성 요소에 모든 것을 통합

App.js에서는 UserList와 UserForm을 결합하여 사용자 목록을 표시하고 사용자 추가/업데이트를 처리합니다.

// src/App.js
import React, { useState } from "react";
import UserList from "./components/UserList";
import UserForm from "./components/UserForm";
import axios from "axios";

const App = () => {
  const [selectedUser, setSelectedUser] = useState(null);

  const handleEdit = user => setSelectedUser(user);

  const handleDelete = async userId => {
    try {
      await axios.delete(`/api/users/${userId}`);
      window.location.reload();
    } catch (error) {
      console.error("Error deleting user:", error);
    }
  };

  const handleSave = () => {
    setSelectedUser(null);
    window.location.reload();
  };

  return (
    <div>
      <h1>Manage Users</h1>
      <UserForm selectedUser={selectedUser} onSave={handleSave} />
      <UserList onEdit={handleEdit} onDelete={handleDelete} />
    </div>
  );
};

export default App;

로그인 후 복사