React:ControlledComponents
lastmod 2026-03-14created 2026-03-141 edits
Controlled Components in React are a pattern in which React state fully controls the state of form elements.
About
Form elements in HTML such as input, textarea, and select hold their own internal state in the DOM by default. A Controlled Component moves this state into React's useState, making React the "Single Source of Truth".
There are two key points:
- Inject the current value from React state via the value prop
- Reflect user input into state via the onChange handler
import { useState } from 'react';
function ControlledInput() {
// React state가 "진실의 원천" / React state is the single source of truth
const [value, setValue] = useState('');
return (
<input
value={value} // state → DOM (읽기 / read)
onChange={(e) => setValue(e.target.value)} // DOM → state (쓰기 / write)
/>
);
}