Skip to content

React:ControlledComponents

React의 Controlled Components는 폼 요소의 상태를 React state가 완전히 제어하는 패턴입니다.

About

HTML의 input, textarea, select 같은 폼 요소는 기본적으로 자체 내부 상태를 DOM 안에 갖습니다. Controlled Component는 이 상태를 React의 useState로 옮겨서, React가 "진실의 원천(Single Source of Truth)" 이 되도록 만드는 방식입니다.

핵심은 두 가지입니다:

  1. value prop으로 현재 값을 React state에서 주입
  2. onChange 핸들러로 사용자 입력을 state에 반영 
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)
    />
  );
}

See also

Favorite site