[React] 🧾 Reactμ—μ„œ μ—¬λŸ¬ μž…λ ₯ ν•„λ“œλ₯Ό ν•œ λ²ˆμ— κ΄€λ¦¬ν•˜λŠ” 법

λ¦¬μ•‘νŠΈλ₯Ό μ“°λ‹€ 보면 이름, 이메일, λΉ„λ°€λ²ˆν˜Έ λ“± μž…λ ₯ν•„λ“œκ°€ μ—¬λŸ¬ 개인 κ²½μš°κ°€ μƒκΉλ‹ˆλ‹€. 그럴 λ•Œλ§ˆλ‹€ useStateλ₯Ό ν•˜λ‚˜μ”© λ§Œλ“€λ©΄ λ„ˆλ¬΄ λ³΅μž‘ν•΄μ§€κ² μ£ ?

μ˜€λŠ˜μ€ 객체 μƒνƒœλ₯Ό μ‚¬μš©ν•΄μ„œ μ—¬λŸ¬ μž…λ ₯값을 ν•˜λ‚˜μ˜ μƒνƒœλ‘œ κ΄€λ¦¬ν•˜λŠ” 방법을 λ°°μ›Œλ΄…μ‹œλ‹€!


1. πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦ μƒνƒœλ₯Ό 객체둜 λ§Œλ“€μ–΄μš”

μ•„λž˜μ™€ 같이 form μƒνƒœλ₯Ό 객체 ν˜•νƒœλ‘œ λ§Œλ“€κ³ , 각 μž…λ ₯ ν•„λ“œμ˜ 이름을 ν‚€(key)둜 μ‚¬μš©ν•©λ‹ˆλ‹€.

const [form, setForm] = useState({
  name: '',
  email: ''
});

이제 μž…λ ₯값이 λ°”λ€” λ•Œλ§ˆλ‹€ ν•΄λ‹Ή ν‚€λ§Œ μ—…λ°μ΄νŠΈν•˜λ©΄ λΌμš”!


2. ✏️ onChange ν•¨μˆ˜ μž¬μ‚¬μš©ν•˜κΈ°

λͺ¨λ“  input에 같은 handleChange ν•¨μˆ˜λ₯Ό 연결해도 λ©λ‹ˆλ‹€. e.target.name을 ν™œμš©ν•΄ μ–΄λ–€ ν•„λ“œκ°€ λ°”λ€Œμ—ˆλŠ”μ§€ μžλ™μœΌλ‘œ κ΅¬λΆ„ν•˜κ±°λ“ μš”.

function handleChange(e) {
  const { name, value } = e.target;
  setForm(prev => ({
    ...prev,
    [name]: value
  }));
}

이제 name="email" λ˜λŠ” name="name" μ†μ„±λ§Œ 잘 뢙이면 μ™„μ„±!


3. πŸ§ͺ 전체 예제 μ½”λ“œ

function SignupForm() {
  const [form, setForm] = useState({
    name: '',
    email: ''
  });

  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: value
    }));
  }

  return (
    <div>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="이름"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="이메일"
      />
      <p>
        이름: {form.name} <br />
        이메일: {form.email}
      </p>
    </div>
  );
}

πŸ–ΌοΈ μƒνƒœ μ—…λ°μ΄νŠΈ 흐름도

μ•„λž˜ 그림은 μž…λ ₯값이 객체 μƒνƒœμ— μ €μž₯되고, ν•΄λ‹Ή 값을 UI에 λ°˜μ˜ν•˜λŠ” 과정을 λ³΄μ—¬μ€λ‹ˆλ‹€:


πŸ“Œ 핡심 μš”μ•½

  • μ—¬λŸ¬ μž…λ ₯값은 객체둜 λ¬Άμ–΄μ„œ μƒνƒœ κ΄€λ¦¬ν•˜λ©΄ 훨씬 κ°„λ‹¨ν•΄μš”
  • name 속성과 e.target.name을 ν™œμš©ν•˜λ©΄ onChange ν•¨μˆ˜ μž¬μ‚¬μš©μ΄ κ°€λŠ₯ν•΄μš”
  • ...prev둜 이전 값을 λ³΄μ‘΄ν•œ ν›„ μ—…λ°μ΄νŠΈν•˜μ„Έμš”

λ‹΅κΈ€ 남기기

이메일 μ£Όμ†ŒλŠ” κ³΅κ°œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν•„μˆ˜ ν•­λͺ©μ€ *(으)둜 ν‘œμ‹œν•©λ‹ˆλ‹€