2026-03-18

Controlled Component

React의 state가 입력값을 관리하는 컴포넌트

⇒ 입력값의 “주도권”이 React에 있음

function Form() {
  const [value, setValue] = useState("");

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

• value는 state에 저장
• onChange로 상태 업데이트
• 항상 React가 값 통제

특징

• 상태 관리 용이
• 실시간 유효성 검사 가능
• 값 제어 가능
• 예측 가능성 높음

Uncontrolled Component

DOM이 직접 입력값을 관리하는 컴포넌트

⇒ 입력값의 “주도권”이 DOM에 있음

예시

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

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

  return <input ref={inputRef} />;
}

• state 사용 안 함
• ref로 직접 접근

특징

• 코드 단순
• 초기값 설정은 defaultValue 사용
• 실시간 제어 어려움
• React 개입 적음

차이 비교

언제 어떤 걸 쓰는가?

• Controlled
  • 실시간 유효성 검사
  • 폼 상태 관리
  • 입력값 동기화 필요할 때 ⇒ 일반적으로 권장 방식
• Uncontrolled
  • 간단한 폼
  • 외부 라이브러리 사용
  • 성능상 부담 줄이고 싶을 때

요약

• Controlled Component는 React의 state가 입력값을 관리하는 방식
  • 상태를 통해 값 제어가 가능
  • 예측 가능성과 유효성 관리에 유리
• Uncontrolled Component는 DOM이 직접 값을 관리하는 방식
  • ref를 통해 DOM에 직접 접근

참고자료

• https://dori-coding.tistory.com/entry/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Controlled-Component%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Uncontrolled-Component
• https://jiyoon-park.tistory.com/entry/controlled-components-vs-uncontrolled-components-%EB%9E%80