React에서 사용자 입력 다루기 – Controlled vs Uncontrolled Components

 

React에서 폼을 다룰 때 가장 먼저 알아야 할 개념이 바로 Controlled와 Uncontrolled 컴포넌트입니다. 이 글에서는 두 방식의 차이와 실제 사용 예제를 통해 언제 어떤 방식을 선택하면 좋은지 설명합니다.

1. Controlled Components란?

Controlled 컴포넌트는 입력값이 컴포넌트의 상태(state)에 의해 제어되는 방식입니다. 입력 값이 상태에 저장되고, 상태에 따라 화면에 표시됩니다.

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

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

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

• 입력값을 실시간으로 검증하거나 조작 가능
• 상태 기반으로 폼의 값을 완벽하게 통제

2. Uncontrolled Components란?

Uncontrolled 컴포넌트는 입력값이 DOM 자체에 저장되는 방식입니다. React의 상태가 아니라 ref를 사용해 값을 가져옵니다.

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

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

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>제출</button>
    </>
  );
}

• 빠르게 값만 가져올 때 편리
• 상태 관리를 최소화할 수 있음

3. 두 방식의 비교

항목	Controlled	Uncontrolled
입력 제어 방식	state로 제어	ref로 제어
실시간 검증	가능	어렵거나 복잡
간단한 구현	상대적으로 복잡	간단
권장 용도	폼이 복잡하고 데이터 제어가 필요한 경우	단순한 입력값 수집

4. 폼 라이브러리와의 관계

react-hook-form, formik 같은 라이브러리들은 대부분 Controlled 컴포넌트를 기반으로 작동하거나 내부적으로 Uncontrolled 방식을 최적화해 사용합니다.

5. 마무리

Controlled 방식은 정밀한 입력 제어에 강하고, Uncontrolled 방식은 간단하고 빠른 구현에 적합합니다. 상황에 따라 적절한 방식을 선택하여 개발의 효율성을 높여보세요.