폼과 제어 컴포넌트

순수 HTML에서는 <input>이 자기 값을 스스로 기억해요. 사용자가 타이핑하면 그 값은 DOM 요소 안에 들어있고, 우리는 필요할 때 꺼내 읽죠. 그런데 리액트는 생각이 좀 달라요.

제어 컴포넌트(controlled component)는 폼 요소의 value를 state에 묶고, 사용자가 입력할 때마다 onChange로 state를 갱신하는 방식이에요. 두 가지를 항상 짝지어 씁니다.

import { useState } from "react";

function NameInput() {
  const [text, setText] = useState("");

  return (
    <input
      value={text}                          // ① state를 화면에 비춤
      onChange={e => setText(e.target.value)} // ② 입력 → state 갱신
    />
  );
}

"그냥 input이 알아서 값을 기억하면 되지, 왜 state로 옮기지?" 싶을 수 있어요. 이유는 state가 값을 쥐고 있으면 그 값을 마음대로 다룰 수 있기 때문이에요.

반대편에는 비제어 컴포넌트(uncontrolled component)가 있어요. 값을 state로 묶지 않고 DOM이 스스로 기억하게 둔 뒤, 필요할 때만 ref로 값을 읽어오는 방식이에요. (ref는 다음 장 CH 09에서 자세히 배워요.)

입력창이 여러 개라고 핸들러를 열 개 만들 필요는 없어요. 각 input에 name을 주고, 하나의 핸들러에서 e.target.name으로 어떤 필드가 바뀌었는지 분기하면 됩니다. state는 객체 하나로 묶어 관리해요.

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

  function handleChange(e) {
    const { name, value } = e.target;        // 어떤 필드? 무슨 값?
    setForm(prev => ({ ...prev, [name]: value })); // 그 필드만 갱신
  }

  return (
    <>
      <input name="id"    value={form.id}    onChange={handleChange} />
      <input name="email" value={form.email} onChange={handleChange} />
    </>
  );
}

// 체크박스는 checked로 제어!
<input
  type="checkbox"
  checked={agree}                              // value가 아니라 checked
  onChange={e => setAgree(e.target.checked)}   // .value가 아니라 .checked
/>

// select는 value로 제어 (텍스트 input과 동일)
<select value={city} onChange={e => setCity(e.target.value)}>
  <option value="seoul">서울</option>
  <option value="busan">부산</option>
</select>

폼을 제출할 때는 <form>에 onSubmit 핸들러를 걸어요. 그런데 브라우저는 폼을 제출하면 기본적으로 페이지를 새로고침(서버로 전송)하려 해요. SPA인 리액트에서는 이걸 막아야 하므로 e.preventDefault()를 가장 먼저 호출합니다.

function LoginForm() {
  const [id, setId] = useState("");

  function handleSubmit(e) {
    e.preventDefault();          // ① 새로고침(기본 동작) 막기
    console.log("제출된 값:", id); // ② 여기서 값 처리 / 서버 전송 등
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={id} onChange={e => setId(e.target.value)} />
      <button type="submit">로그인</button>
    </form>
  );
}