✅ React 기초 강좌

📄 components/FormPractice.jsx

import { useState } from 'react';

function FormPractice() {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    if (name.trim() === '') {
      setMessage('이름을 입력해주세요.');
    } else {
      setMessage(`${name}님 반갑습니다!`);
    }
  };

  return (
    <div>
      <h2>👤 이름 인사 폼</h2>
      <input
        type="text"
        placeholder="이름을 입력하세요"
        value={name}
        onChange={handleChange}
      />
      <button onClick={handleClick}>인사하기</button>
      <p>{message}</p>
    </div>
  );
}

export default FormPractice;

📄 App.jsx에서 사용

import FormPractice from './components/FormPractice';

function App() {
  return (
    <div>
      <h1>React 이벤트 처리 예제</h1>
      <FormPractice />
    </div>
  );
}

export default App;

✅ 결과 예시

이름을 입력하세요: [김철수]
[인사하기] 클릭 →
→ 김철수님 반갑습니다!