제어 컴포넌트 vs 비제어 컴포넌트 — 폼을 다루는 두 가지 철학

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // email과 password state를 직접 사용
    login(email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}           // React state가 값을 결정
        onChange={(e) => setEmail(e.target.value)}  // 변경을 React에 알림
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">로그인</button>
    </form>
  );
}

function PhoneInput() {
  const [phone, setPhone] = useState('');

  const handleChange = (e) => {
    // 숫자만 허용
    const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
    // 자동 포맷팅: 010-1234-5678
    const formatted = onlyNumbers.replace(
      /(\d{3})(\d{4})(\d{4})/,
      '$1-$2-$3'
    );
    setPhone(formatted);
  };

  return <input value={phone} onChange={handleChange} />;
}

function LoginForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 제출 시점에 DOM에서 값을 읽는다
    const email = emailRef.current.value;
    const password = passwordRef.current.value;
    login(email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        ref={emailRef}
        defaultValue=""           // 초기값만 설정, 이후 DOM이 관리
      />
      <input
        type="password"
        ref={passwordRef}
        defaultValue=""
      />
      <button type="submit">로그인</button>
    </form>
  );
}

// 제어 컴포넌트 — value 사용
<input value={state} onChange={handler} />

// 비제어 컴포넌트 — defaultValue 사용
<input defaultValue="초기값" ref={inputRef} />

function BigForm() {
  const [form, setForm] = useState({
    name: '',
    email: '',
    address: '',
    // ... 20개 필드
  });

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

  // 한 필드 입력 → 전체 폼 리렌더링
  return (
    <form>
      <input value={form.name} onChange={handleChange('name')} />
      <input value={form.email} onChange={handleChange('email')} />
      {/* 20개 필드 모두 리렌더링 */}
    </form>
  );
}

// 방법 1: 각 필드를 별도 컴포넌트로 분리
const FormField = React.memo(({ value, onChange, label }) => (
  <label>
    {label}
    <input value={value} onChange={onChange} />
  </label>
));

// 방법 2: 각 필드에 독립적인 state
function BigForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  // 각 필드의 변경이 다른 필드에 영향을 주지 않음
}

function FileUpload() {
  const fileRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const file = fileRef.current.files[0];
    uploadFile(file);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* file input은 항상 비제어 — 보안상 value 설정 불가 */}
      <input type="file" ref={fileRef} />
      <button type="submit">업로드</button>
    </form>
  );
}

// 제어
<select value={selected} onChange={(e) => setSelected(e.target.value)}>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
</select>

// 비제어
<select defaultValue="apple" ref={selectRef}>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
</select>

// 제어 — HTML과 다르게 value prop을 사용
<textarea value={text} onChange={(e) => setText(e.target.value)} />

// 비제어
<textarea defaultValue="초기 텍스트" ref={textRef} />