간단한 React 애플리케이션 예제

간단한 React 애플리케이션 예제

아래는 사용자 목록을 보여주는 간단한 React 애플리케이션입니다:

import React, { useState } from 'react';

// 사용자 항목 컴포넌트
function UserItem({ user }) {
  return (
    <div className="user-item">
      <h3>{user.name}</h3>
      <p>이메일: {user.email}</p>
    </div>
  );
}

// 사용자 목록 컴포넌트
function UserList({ users }) {
  return (
    <div className="user-list">
      {users.map(user => (
        <UserItem key={user.id} user={user} />
      ))}
    </div>
  );
}

// 사용자 추가 폼 컴포넌트
function AddUserForm({ onAddUser }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!name || !email) return;
    
    onAddUser({ id: Date.now(), name, email });
    setName('');
    setEmail('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="이름"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="이메일"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">추가</button>
    </form>
  );
}

// 앱 컴포넌트
function App() {
  const [users, setUsers] = useState([
    { id: 1, name: '김철수', email: 'kim@example.com' },
    { id: 2, name: '이영희', email: 'lee@example.com' }
  ]);

  const addUser = (newUser) => {
    setUsers([...users, newUser]);
  };

  return (
    <div className="app">
      <h1>사용자 관리</h1>
      <AddUserForm onAddUser={addUser} />
      <UserList users={users} />
    </div>
  );
}

export default App;

React의 주요 개념 요약

1. 컴포넌트: UI의 독립적이고 재사용 가능한 조각
2. JSX: JavaScript 내에서 HTML과 유사한 마크업 작성
3. Props: 부모에서 자식 컴포넌트로 데이터 전달
4. State: 컴포넌트 내에서 변경 가능한 데이터
5. 이벤트 처리: 사용자 상호작용 처리
6. Hooks: 함수형 컴포넌트에서 상태와 생명주기 기능 사용