[React] Controlled vs Uncontrolled Component

📌 Controlled Component

• React 상태(state)를 통해 폼의 값을 제어
• 폼 요소의 값이 항상 React 상태와 동기화됨
• value와 onChange 이벤트를 사용해야 함

import { useState } from 'react';

function ControlledInput() {
    const [inputValue, setInputValue] = useState('');

    const handleChange = (e) => {
        setInputValue(e.target.value);
    };

    return (
        <input 
            type="text" 
            value={inputValue} 
            onChange={handleChange} 
        />
    );
}

 

 

장점

• 폼의 값이 React 상태에 저장돼서 값을 추적하고 제어할 수 있음
• 폼 데이터를 유효성 검사하거나 동적으로 수정할 때 적합

주의할 점

• 항상 value와 onChange를 함께 사용해야 함
• value에 undefined가 들어가면 오류가 발생할 수 있음
• value={data || ''}처럼 기본값을 설정해줘야 함

<input value={undefined} /> // 오류 발생

 

 

📌 Uncontrolled Component

• 폼 요소의 값을 DOM 자체에서 관리함
• defaultValue 속성을 사용해 초기 값만 설정
• 이후 값은 DOM에서 직접 관리되고, React 상태에 연결되지 않음

import { useRef } from 'react';

function UncontrolledInputWithRef() {
    const inputRef = useRef();

    const handleClick = () => {
        alert(inputRef.current.value);
    };

    return (
        <>
            <input ref={inputRef} type="text" defaultValue="Ref 사용 예시" />
            <button onClick={handleClick}>값 확인</button>
        </>
    );
}

 

장점

• 구현이 간단하고, 상태 관리가 필요 없는 경우 사용하기 좋음
• 폼 초기값만 필요할 때 적합

주의할 점

• 값이 변경돼도 React에서는 해당 값을 추적할 수 없음
• 값에 접근하려면 **Ref (useRef)**를 사용해야 함
  

 

📌 Controlled vs Uncontrolled Component 비교

구분	Controlled Component	Uncontrolled Component
상태 관리	React 상태(state)로 관리	DOM 자체에서 관리
초기 값 설정	value와 onChange 사용	defaultValue 사용
값 변경 추적	가능 (React 상태에 저장)	불가능 (Ref를 사용해야 함)
적합한 상황	값의 유효성 검사, 폼 제어 필요 시	간단한 초기값 설정 시, 상태 관리 불필요
주의할 점	항상 value와 onChange 함께 사용	초기값 이후 React에서 값 추적 불가

 

 

📌 사용 추천

1. 폼 데이터가 중요하거나, 입력값을 추적해야 할 경우
   → Controlled Component 사용
2. 초기 값만 설정하고, 이후 값 변경을 추적할 필요가 없는 경우
   → Uncontrolled Component 사용
3. 간단한 폼이나 성능이 중요한 경우
   → Uncontrolled Component가 더 적합