React에서 제어 컴포넌트와 비제어 컴포넌트의 차이와 선택 기준을 설명해주세요.

제어 컴포넌트는 input의 값을 React state가 소유합니다. 값이 바뀔 때마다 onChange로 state를 갱신하고, 화면은 그 state를 다시 받습니다. 즉 “React가 진실의 원천”입니다.

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

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="이름"
    />
  );
}

비제어 컴포넌트는 DOM이 값을 갖고 있고, 필요할 때 ref로 읽습니다. 입력 중 매번 렌더링할 필요가 없거나 파일 input처럼 브라우저 제약이 있는 경우에 편합니다.

const inputRef = useRef<HTMLInputElement>(null);
const submit = () => console.log(inputRef.current?.value);

실무 기준은 명확합니다. 즉시 검증, 입력값에 따른 버튼 활성화, 마스킹, 다른 필드와의 연동이 필요하면 제어 컴포넌트가 좋습니다. 단순 제출 폼이거나 성능상 많은 입력을 가볍게 처리해야 하면 비제어 방식도 괜찮습니다. 둘 중 하나가 절대적으로 우월하다기보다 “값을 누가 책임질 것인가”의 문제입니다.