폼 값의 주인이 React state인지 DOM인지가 설계를 가른다
controlled input은 입력값을 state로 끌어와 즉시 검증과 UI 동기화를 쉽게 만듭니다. uncontrolled input은 DOM 값을 유지하고 submit 시점에 ref로 읽어 더 가볍게 다룹니다.| 구분 | 값의 위치 | 갱신 시점 | 맞는 사용처 |
|---|---|---|---|
| controlled | React state |
onChange마다 state 반영
|
즉시 검증, disabled 버튼, 조건부 UI |
| uncontrolled | DOM value와 ref | submit이나 필요 시점에 읽기 | 파일 입력, 단순 검색, 외부 폼 연동 |
| validation | state 또는 FormData | 입력 중 또는 제출 직전 | 오류 메시지와 서버 payload 검증 |
| tradeoff | 제어 비용과 단순성 사이 | 입력 빈도와 UI 의존성 기준 | 복잡하면 state, 단순하면 ref |
source
값의 원천이 state인지 DOM인지 먼저 정합니다.
sync
다른 UI가 입력값에 즉시 반응해야 하면 controlled가
유리합니다.
submit
제출 때만 필요하면 ref나 FormData로도 충분합니다.
cost
입력마다 렌더가 발생하는지와 검증 범위를 함께 봅니다.