🎮 Controlled와 Uncontrolled - 리액트 폼 컴포넌트 이해하기

import { useState } from 'react';

export default function Controlled() {
  const [name, setName] = useState('');
  
  return (
    <label>
      이름
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </label>
  );
}

import { useRef } from 'react';

export default function Uncontrolled() {
  const inputRef = useRef(null);
  
  function handleSubmit(e) {
    e.preventDefault();
    const value = inputRef.current?.value ?? '';
    alert('입력값: ' + value);
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름
        <input 
          type="text"
          defaultValue="BlueCool"
          ref={inputRef}
        />
      </label>
      <button type="submit">등록</button>
    </form>
  );
}

import { useRef } from 'react';

function FileInput() {
  const ref = useRef(null);
  
  return (
    <div>
      <input type="file" ref={ref} />
      <button 
        onClick={() => {
          if (ref.current) ref.current.value = '';
        }}
      >
      초기화
      </button>
    </div>
  );
}