Controlled Components
Controlled Components는 input, textarea, select 같은 폼 요소의 현재 값을 React state가 관리하는 패턴입니다. 사용자가 입력하면 onChange가 state를 바꾸고, 그 state가 다시 value나 checked로 입력 요소에 주입됩니다.
▶아키텍처 다이어그램
📊 데이터 흐름 다이어그램점선 애니메이션은 데이터 또는 요청의 흐름 방향을 나타냅니다
브라우저 입력 요소는 기본적으로 자신만의 내부 상태를 갖습니다. 이 값을 React가 따로 모르고 있으면, 검증 결과 표시, 버튼 활성화 제어, 다른 UI와의 동기화 같은 작업이 바로 어려워집니다. 폼 값의 진짜 기준이 DOM인지 React state인지 갈라지면 디버깅도 까다로워집니다.
전통적인 폼 처리는 제출 시점에 DOM에서 값을 한꺼번에 읽는 방식이 흔했습니다. 하지만 현대 프런트엔드는 입력 중 실시간 검증, 즉시 필터링, 여러 필드 간 의존 관계를 자주 다룹니다. 이런 압력 때문에 입력값을 애플리케이션 상태 흐름 안으로 끌어들이는 controlled 패턴이 널리 쓰이게 됐습니다.
사용자가 입력하면 onChange 핸들러가 새 값을 읽고 state를 갱신합니다. 다음 렌더에서 state의 현재 값이 다시 input의 value나 checked로 들어가므로, 화면에 보이는 입력값과 React state가 항상 같은 기준을 공유합니다. 이 루프 덕분에 입력값을 다른 UI와 쉽게 연결할 수 있습니다.
Controlled components는 state를 사용하는 폼 패턴이고, ref 기반 접근은 DOM에 들어 있는 현재 값을 필요할 때 직접 읽는 쪽에 가깝습니다. 또한 일반 이벤트 핸들링이 모든 상호작용을 다루는 넓은 개념이라면, controlled pattern은 입력 이벤트를 state와 연결한 특화 구조입니다.
State
컴포넌트가 다음 렌더까지 기억해 두는 현재 값
controlled components는 state를 폼 입력에 적용한 구체적 패턴입니다. state가 일반 원리라면, controlled pattern은 입력 제어에 특화된 응용입니다.
Events
사용자 입력을 React 로직과 state 변화로 연결하는 방식
controlled components는 입력 이벤트를 state 갱신 루프에 묶은 패턴이고, 일반 이벤트 핸들링은 클릭과 제출을 포함한 더 넓은 상호작용 개념입니다.
Ref
재렌더 없이 값을 보관하거나 실제 DOM 노드에 직접 닿는 React의 탈출구
controlled pattern은 입력값을 state가 관리하고, ref 기반 접근은 DOM이 가진 현재 값을 직접 읽습니다. 값의 단일 기준을 어디에 두는지가 차이입니다.
실무에서는 검색 입력 debounce, 비밀번호 확인, 여러 필드 조합으로 버튼 활성화, 입력값 마스킹 같은 장면에서 controlled pattern이 특히 강합니다. 다만 매우 큰 폼에서 모든 입력을 상위 state 하나로 몰면 재렌더 부담이 커질 수 있으므로, 필드 경계와 상태 위치를 함께 설계해야 합니다.