React에서 Form 입력값 제어 – Controlled vs Uncontrolled Components

 

React로 폼을 만들 때 사용자 입력을 어떻게 다룰지에 따라 Controlled Component와 Uncontrolled Component로 나뉩니다. 각각의 개념과 사용 예제를 통해 언제 어떤 방식을 선택할지 알아보겠습니다.

1. Controlled Component란?

입력값을 useState로 직접 상태로 관리하는 방식입니다. 모든 변화는 React 상태를 통해 이루어집니다.

import { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`입력한 이름: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleChange} />
      <button type="submit">제출</button>
    </form>
  );
}

장점:

• 상태와 UI가 항상 동기화됨
• 입력값 검증, 초기값 설정 등이 쉬움

2. Uncontrolled Component란?

입력값을 React 상태가 아닌 DOM 자체에서 직접 참조하는 방식입니다.

import { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`입력한 이름: ${inputRef.current.value}`);
  };

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

장점:

• 간단한 폼에서는 구현이 빠르고 코드가 짧음
• 입력값이 많고 상태 관리가 번거로울 때 유리

3. 비교 및 선택 기준

항목	Controlled	Uncontrolled
입력값 제어	React state	DOM 직접 접근
초기값 설정	state로 설정	defaultValue 사용
코드 복잡도	비교적 많음	간단함
사용 예시	복잡한 폼, 유효성 검사 필요	간단한 입력만 필요할 때

4. 마무리

대부분의 경우 Controlled Component를 사용하는 것이 React 철학에 더 부합하고 유지 관리에도 유리합니다. 하지만 상황에 따라 Uncontrolled Component를 혼용하면 성능과 간결함 모두 잡을 수 있습니다. 필요에 따라 적절히 선택해 사용해보세요!