Uncontrolled Component

Uncontrolled Component란?

React에서 form을 다루다 보면,
Controlled / Uncontrolled Component라는 개념을 자주 접하게 된다.

이 둘의 차이는 단순한 구현 방식이 아니라,
입력값을 누가 관리하느냐에 대한 구조적 선택이다.

Controlled Component

const [value, setValue] = useState("");

<input value={value} onChange={e => setValue(e.target.value)} />

특징:
-input의 값은 React state에서 관리
-타이핑할 때마다 setState 발생
-그에 따라 매번 rerender

장점

상태 추적이 명확함
값 제어가 직관적

단점

input 수가 많아질수록 렌더링 비용 증가
상태 관리 코드가 빠르게 복잡해짐

Uncontrolled Component

<input ref={inputRef} />

또는 react-hook-form 방식:

<input {...register("email")} />

특징:

input 값은 DOM이 직접 관리
React는 submit, validation 등 필요한 순간에만 값 접근
입력 중에는 React rerender 발생 없음

장점

렌더링 횟수 감소
대형 폼에서도 성능 안정적
상태 관리 코드 최소화

단점

실시간 값 제어에는 부적합
로직 설계가 필요

핵심 차이

구분	값 관리
Controlled	React state
Uncontrolled	DOM

Controlled는 React가 값의 주인,
Uncontrolled는 DOM이 값의 주인이다.

react-hook-form이 Uncontrolled를 사용하는 이유

폼은 구조적으로:

입력 필드가 많고

검증 로직이 많고

단계가 복잡하다.

Controlled 방식으로 관리하면
상태 관리와 렌더링 비용이 빠르게 증가한다.

react-hook-form은
DOM 중심 구조(Uncontrolled)를 채택하여

불필요한 rerender 최소화

성능 개선

코드 복잡도 감소

라는 효과를 얻는다.