React 폼 처리 완전정복｜Controlled Component로 입력과 제출까지 완성하기

📘 리액트 스터디 시리즈 7편

폼 입력과 Controlled Component 완전정복｜React로 사용자 입력 처리하기

안녕하세요! 오늘은 사용자 입력을 다루는 방법, 즉 폼 처리와 Controlled Component를 배워봅니다 ✍️

텍스트 입력, 체크박스, 셀렉트박스 등 모든 입력 UI를 리액트에서 다루는 실전 핵심 개념이에요!

---

📥 Controlled Component란?

입력값(value)이 컴포넌트의 상태(state)에 의해 제어되는 input 요소를 Controlled Component라고 합니다.

즉, 사용자의 입력 → setState → 화면 렌더링 → 상태가 바뀜 → input value 갱신

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>입력한 이름: {name}</p>
    </div>
  );
}

• ✅ value는 상태 값
• ✅ onChange는 입력 이벤트 발생 시 호출됨
• ✅ 입력값이 React 상태로 동기화됨

---

✅ 폼 제출 처리하기

폼(form) 제출 시에는 onSubmit 이벤트와 event.preventDefault()를 함께 사용합니다.

function FormExample() {
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // 새로고침 방지
    alert(`이메일 제출: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">제출하기</button>
    </form>
  );
}

📌 꼭 e.preventDefault()로 기본 동작(새로고침)을 막아주세요!

---

🔘 체크박스와 라디오 버튼

✅ 체크박스는 checked 속성을 상태와 연결합니다.

function AgreeCheck() {
  const [agreed, setAgreed] = useState(false);

  return (
    <label>
      <input
        type="checkbox"
        checked={agreed}
        onChange={(e) => setAgreed(e.target.checked)}
      />
      이용약관에 동의합니다
    </label>
  );
}

✅ 라디오 버튼은 name 속성이 같아야 그룹으로 인식됩니다.

---

📋 드롭다운 (select)

function SelectGender() {
  const [gender, setGender] = useState('male');

  return (
    <select value={gender} onChange={(e) => setGender(e.target.value)}>
      <option value="male">남성</option>
      <option value="female">여성</option>
    </select>
  );
}

✅ 드롭다운도 value와 onChange로 상태 연결

---

🧪 실전 예제 - 가입 폼 만들기

function SignupForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`이름: ${name}, 이메일: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>이름</p>
      <input value={name} onChange={(e) => setName(e.target.value)} />

      <p>이메일</p>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />

      <button>가입하기</button>
    </form>
  );
}

🎉 입력값 관리, 제출 처리까지 한 번에 경험해보세요!

---

🧠 정리 - 오늘 배운 핵심 포인트

• ✔️ Controlled Component는 상태와 입력값을 연결한 입력 필드
• ✔️ value, checked는 상태로 관리
• ✔️ onChange로 상태 업데이트
• ✔️ onSubmit으로 폼 제출 처리 가능

---

📌 다음 편 예고

8편에서는 리액트 앱의 페이지 이동과 라우팅을 다루는 React Router를 배웁니다!

URL에 따라 다른 화면을 보여주는 법, 한 번에 정리해드릴게요 🌍

---

💬 오늘 배운 내용 중 궁금한 점은 댓글로 남겨주세요! React 스터디, 이제 사용자와 소통하는 UI를 완성해가고 있어요 😊