React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(19)

사용자 관리 기능 구현: 사용자 목록, 상세 정보 보기, 수정 및 삭제

이번 강의에서는 React와 Node.js를 사용해 사용자 관리 기능을 구현합니다. 이 기능은 사용자 목록 조회, 상세 정보 보기, 사용자 정보 수정, 그리고 사용자 삭제를 포함합니다. 이를 통해 웹 애플리케이션에서 사용자 데이터를 관리할 수 있습니다.

사용자 관리 기능

---

1. 사용자 목록 및 상세 정보 보기

사용자 목록을 조회하고, 각 사용자의 상세 정보를 확인할 수 있는 화면을 구성합니다.

1.1 사용자 목록 컴포넌트

먼저, 사용자 목록을 화면에 렌더링하는 컴포넌트를 구현합니다.

// src/components/UserList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

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

  // API를 통해 사용자 목록 불러오기
  useEffect(() => {
    axios.get('/api/users')
      .then(response => setUsers(response.data))
      .catch(error => console.error('Error fetching users:', error));
  }, []);

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>
              {user.username}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

1.2 사용자 상세 정보 보기

사용자 아이디를 클릭하면 해당 사용자의 상세 정보를 보여주는 컴포넌트를 구현합니다.

// src/components/UserDetail.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams(); // URL에서 사용자 ID 가져오기
  const [user, setUser] = useState(null);

  // 사용자 상세 정보 불러오기
  useEffect(() => {
    axios.get(`/api/users/${id}`)
      .then(response => setUser(response.data))
      .catch(error => console.error('Error fetching user:', error));
  }, [id]);

  if (!user) {
    return <div>사용자 정보를 불러오는 중입니다...</div>;
  }

  return (
    <div>
      <h1>{user.username}님의 정보</h1>
      <p>이름: {user.username}</p>
      <p>이메일: {user.email}</p>
    </div>
  );
}

export default UserDetail;


export default UserList;

1.3 코드 설명

• UserList: 모든 사용자의 목록을 렌더링하며, 사용자 아이디를 클릭하면 UserDetail로 이동합니다.
• UserDetail: 사용자의 아이디를 기반으로 상세 정보를 불러와 렌더링합니다.
• axios.get: 서버로부터 사용자 데이터를 가져오는 API 호출을 처리합니다.

---

2. 사용자 정보 수정 및 삭제 기능

2.1 사용자 정보 수정 폼

사용자가 자신의 정보를 수정할 수 있는 폼을 구현합니다. 수정 후, 서버로 데이터를 전송하여 업데이트합니다.

// src/components/UserEditForm.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';

function UserEditForm() {
  const { id } = useParams();
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');

  // 기존 사용자 정보 불러오기
  useEffect(() => {
    axios.get(`/api/users/${id}`)
      .then(response => {
        setUsername(response.data.username);
        setEmail(response.data.email);
      })
      .catch(error => console.error('Error fetching user:', error));
  }, [id]);

  const handleSubmit = (e) => {
    e.preventDefault();

    // 수정된 사용자 정보를 서버로 전송
    axios.put(`/api/users/${id}`, { username, email })
      .then(() => alert('사용자 정보가 수정되었습니다.'))
      .catch(error => console.error('Error updating user:', error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>사용자 정보 수정</h2>
      <div>
        <label>사용자 이름</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
      </div>
      <div>
        <label>이메일</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      <button type="submit">수정</button>
    </form>
  );
}

export default UserEditForm;

2.2 사용자 삭제 버튼 추가

사용자를 삭제할 수 있는 버튼을 추가하고, 서버로 DELETE 요청을 보냅니다.

// src/components/UserDetail.js
import React from 'react';
import axios from 'axios';
import { useParams, useHistory } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  const history = useHistory();
  
  const handleDelete = () => {
    if (window.confirm('정말로 이 사용자를 삭제하시겠습니까?')) {
      axios.delete(`/api/users/${id}`)
        .then(() => {
          alert('사용자가 삭제되었습니다.');
          history.push('/users'); // 삭제 후 사용자 목록으로 이동
        })
        .catch(error => console.error('Error deleting user:', error));
    }
  };

  return (
    <div>
      <h2>사용자 상세 정보</h2>
      <button onClick={handleDelete}>삭제</button>
    </div>
  );
}

export default UserDetail;

---

3. 백엔드에서 사용자 관리 API 구현

Express.js와 MySQL을 사용해 사용자 관리 API를 구현합니다.

3.1 사용자 목록 조회 API

// 사용자 목록 API
app.get('/api/users', (req, res) => {
  const query = 'SELECT * FROM users';
  db.query(query, (err, results) => {
    if (err) return res.status(500).send('Error fetching users');
    res.json(results);
  });
});

3.2 사용자 상세 조회 API

// 사용자 상세 정보 API
app.get('/api/users/:id', (req, res) => {
  const { id } = req.params;
  const query = 'SELECT * FROM users WHERE id = ?';
  db.query(query, [id], (err, results) => {
    if (err || results.length === 0) return res.status(404).send('User not found');
    res.json(results[0]);
  });
});

3.3 사용자 수정 API

// 사용자 정보 수정 API
app.put('/api/users/:id', (req, res) => {
  const { id } = req.params;
  const { username, email } = req.body;
  const query = 'UPDATE users SET username = ?, email = ? WHERE id = ?';
  db.query(query, [username, email, id], (err) => {
    if (err) return res.status(500).send('Error updating user');
    res.send('User updated successfully');
  });
});

3.4 사용자 삭제 API

// 사용자 삭제 API
app.delete('/api/users/:id', (req, res) => {
  const { id } = req.params;
  const query = 'DELETE FROM users WHERE id = ?';
  db.query(query, [id], (err) => {
    if (err) return res.status(500).send('Error deleting user');
    res.send('User deleted successfully');
  });
});

---

4. 전체 흐름

1. 사용자 목록: 사용자 목록을 불러와 렌더링하며, 각각의 사용자 이름을 클릭하면 상세 정보로 이동합니다.
2. 상세 정보: 특정 사용자의 정보를 불러와 화면에 표시하며, 수정 및 삭제 기능을 제공합니다.
3. 정보 수정: 사용자가 정보를 수정하면 서버에 PUT 요청을 보내 데이터를 업데이트합니다.
4. 사용자 삭제: 사용자가 삭제 버튼을 클릭하면 서버에 DELETE 요청을 보내 해당 사용자를 삭제합니다.

---

결론

이번 강의에서는 사용자 관리 기능을 구현하여, 사용자 목록 및 상세 정보 보기, 사용자 정보 수정 및 삭제 기능을 모두 다루었습니다. React와 Node.js를 사용하여 CRUD 작업을 처리하고, API를 통해 서버와 통신하는 방법을 익혔습니다.