제어 컴포넌트 vs 비제어 컴포넌트

 

제어 컴포넌트(React가 값 관리)

function App() {
  const [text, setText] = useState("");

  const handleChange = (e) => setText(e.target.value);

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

• React 상태(text)가 값을 완전히 제어
• 사용자가 입력할 때마다 상태가 업데이트되어야만 값이 변경됨

---

비제어 컴포넌트(DOM이 값 관리):

function App() {
  return <input type="text" />;
}

• 입력값은 DOM에서만 관리되며 React는 관여하지 않음
• 사용자가 값을 자유롭게 입력 가능

---

 

	제어 컴포넌트	비제어 컴포넌트
데이터 관리	리액트 state로 데이터 관리	DOM에서 직접 데이터 관리
유효성 검사	쉽게 구현 가능	추가 코드 작성 필요
코드 복잡성	복잡할 수 있음	간단한 폼에 적합
특수 입력 요소	다소 복잡하게 동작할 수 있음	파일 업로드 등 특수 입력에 적합
권장 사용 사례	동적 업데이트, 유효성 검사가 필요한 경우	간단한 폼, 초기값만 필요한 경우