Controlled Component와 Uncontrolled Component

🧩 Controlled Component란?

Controlled Component(제어 컴포넌트)는 입력 요소의 값(value)을 리액트의 상태(state)로 관리하는 컴포넌트이다.

즉, 입력 값의 주도권이 DOM이 아닌 리액트에 있다.

리액트의 상태가 입력 요소의 값을 결정하고, 사용자가 입력을 변경하면 onChange 이벤트를 통해 상태를 업데이트된다.

import React, { useState } from "react";

function ControlledInput() {
  const [name, setName] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>입력값: {name}</p>
    </div>
  );
}

export default ControlledInput;

✅ 특징

• value가 항상 리액트 상태(state)와 동기화됨
• 실시간 입력 검증, 조건부 렌더링 등 복잡한 폼 로직 구현 가능
• 리액트 상태를 통해 입력 값의 변화를 완전히 제어할 수 있음

---

🧩 Uncontrolled Component란?

Uncontrolled Component(비제어 컴포넌트)는 입력 요소의 값이 DOM 내부에서 직접 관리되는 방식이다. 즉, 리액트가 값을 제어하지 않고 DOM에 위임하는 구조죠.

이때는 ref를 사용해 DOM에 직접 접근하여 값을 가져옵니다.

import React, { useRef } from "react";

function UncontrolledInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    alert(`입력값: ${inputRef.current?.value}`);
  };

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

export default UncontrolledInput;

✅ 특징

• 입력 값이 DOM에서 관리되어 리액트 상태 업데이트 비용이 없음
• useRef로 직접 접근해야 함
• 단순 입력/제출 폼에 적합

---

🧠 Controlled vs Uncontrolled 한눈에 비교

구분	Controlled Component	Uncontrolled Component
입력 값 관리 주체	React state	DOM
값 접근 방식	state 변수	ref (DOM 직접 접근)
주요 이벤트	onChange	onSubmit 시점 등
실시간 검증/제어	가능	불가능 또는 복잡
성능 부담	다소 있음 (상태 업데이트)	상대적으로 적음
적합한 상황	실시간 입력 검증, 동적 UI	단순 입력, 제출 시 값만 필요할 때

---

언제 어떤 방식을 써야 할까?

1. Controlled Component를 써야 하는 경우

   • 입력 시마다 유효성 검증, 포맷팅, 조건부 렌더링이 필요한 경우
   • 다중 입력 필드 간 의존 관계가 있는 경우
   • 사용자가 입력할 때마다 즉시 피드백이 필요한 경우 → 예: 로그인 폼, 회원가입 폼, 실시간 검색창 등

2. Uncontrolled Component를 써야 하는 경우

   • 단순히 한 번에 값을 제출만 하면 되는 폼
   • 리렌더링 부담을 줄이고 싶을 때
   • React 외부 라이브러리(FormData, Vanilla JS)와 함께 사용할 때 → 예: 간단한 이메일 구독 폼, 파일 업로드 폼 등

---

💡 마무리

Controlled Component와 Uncontrolled Component는 리액트 폼 관리의 두 가지 핵심 축이다.

• Controlled: 리액트가 모든 것을 관리 → 정교하지만 복잡
• Uncontrolled: DOM이 관리 → 간단하지만 제어 어려움

폼이 복잡할수록 Controlled 방식이 유리하고, 단순 입력만 필요한 경우 Uncontrolled 방식이 효율적임.

---

END