Controlled vs Uncontrolled 컴포넌트

개념 설명

폼 요소의 값이 React state로 제어되는지(Controlled) 또는 DOM이 직접 관리하는지(Uncontrolled)에 따른 컴포넌트 분류.

핵심 포인트

• Controlled: React state가 폼 값의 단일 소스 역할 (value + onChange)
• Uncontrolled: DOM이 자체적으로 폼 값 관리 (ref 사용하여 접근)
• Controlled는 실시간 유효성 검사나 포맷팅에 유리
• Uncontrolled는 간단한 폼이나 서드파티 라이브러리 통합에 적합
• 동일한 컴포넌트에서 둘을 혼용하면 안됨

예시 코드

// Controlled 컴포넌트
function ControlledForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});