✅ React 기초 강좌

🎯 학습 목표

• React에서 이벤트를 처리하는 방법을 이해한다.
• 사용자 입력(input, button 등)에 따라 동작을 구현할 수 있다.
• 이벤트 핸들러 함수를 작성하고 JSX에 연결하는 방법을 익힌다.

✅ React의 이벤트 처리 특징

React에서는 브라우저 호환성을 고려한 SyntheticEvent를 사용합니다.

🔧 기본 사용 예제

function EventExample() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return (
    <button onClick={handleClick}>클릭</button>
  );
}

🖊️ 사용자 입력 다루기 (onChange)

import { useState } from 'react';

function InputExample() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value); // e.target은 input 요소
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>입력한 값: {value}</p>
    </div>
  );
}

💡 복합 예제: 이름 입력 + 인사하기 버튼

import { useState } from 'react';

function GreetingForm() {
  const [name, setName] = useState('');
  const [greeting, setGreeting] = useState('');

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

  const handleSubmit = () => {
    setGreeting(`안녕하세요, ${name}님!`);
  };

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

export default GreetingForm;

✍️ 과제

🧩 1. 다음 기능을 하는 FormPractice 컴포넌트를 만들어보세요:

• 사용자가 텍스트를 입력하면 해당 값을 상태에 저장
• 버튼 클릭 시 “OOO님 반갑습니다!” 라는 인사말 출력

예시 출력:

[김철수 입력 후 → 버튼 클릭]
→ 김철수님 반갑습니다!